Question

为简单起见，假设如下：

<svg id="node">
 <g id="reg">
   <!--Path data-->
 </g>
 <g id="expanded">
   <!--Path data-->
 </g>
</svg>

这是我的代码的一般方案，为了便于阅读，省略了一些svg属性。

问题：我可以访问和修改＆＃34;节点＆＃34;使用getElementById("node")的元素，但如果我尝试通过childNodes或直接id或getElementsByTagName访问节点的子节点，它似乎给了我一个实际上不在DOM中的克隆元素。我说这是因为我对儿童的任何改变都没有反映在屏幕上。

我如何解决此问题，谢谢？

Answer 1

您应该可以使用setAttribute！

您可以按id找到元素。

var element = document.getElementById("reg");
element.setAttribute("fill", "white");

或者你可以使用那些帮助类。因此，将类应用于您的路径，如

var element = document.getElementsByClassName("node");
var child1 = element.getElementsByClassName("reg");
child1.setAttribute("fill", "white");

如果你能够使用jQuery，那真的很容易：

$("svg").find("g");

如何设置SVG子元素的属性？

1 个答案: