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

Question

为简单起见，假设如下:

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

这是我的代码的总体方案，为了可读性，省略了一些 svg 属性。

Problem: I can access and modify the "node" element using getElementById("node") , but if i try to access the children of node via childNodes or via direct id , or via getElementsByTagName it seems to give me a clone element that is not actually in the DOM. I say this cause any changes i make to the child lements are not reflected on the screen.

我该如何解决这个问题，谢谢？

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");