如何在没有ID的情况下更改嵌套SVG元素的属性？

Question

我想更改rect

的高度

<clipPath xmlns="http://www.w3.org/2000/svg" id="svge-1">
    <rect fill="none" x="0" y="0" width="761" height="231" />
</clipPath>

根据这个http://tutorials.jenkov.com/svg/scripting.html#changing-attribute-values，它应该很简单，但问题是rect这里没有id。

如何向其添加id或访问此处height的{​​{1}}？

Answer 1

还有其他几种使用DOM检索元素的方法。

您可以使用getElementById('svge-1')获取父元素，并在该元素的上下文中使用rect获取名为getElementsByTagName的元素。这将为您提供第一个（也是唯一的）rect元素：

var clipPathElement = document.getElementById("svge-1");
var rectElement = clipPathElement.getElementsByTagName("rect")[0];

您还可以使用DOM属性来获取子元素，并使用children忽略其名称。这将为您提供第一个元素，即rect：

var rectElement = clipPathElement.children[0];

您也可以使用childNodes，但您必须获取第二个对象（childNodes[1]），因为它包含所有节点（不仅仅是元素），其中包含标签前的空白文本节点。

从那里你可以改变你想要的任何属性：

rectElement.setAttribute("height", "100");

这是一个 JSFiddle ，附带一个工作示例。