如何設置SVG子元素的屬性？

Question

爲了簡單起見，假設如下：

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

這是我的代碼的總體方案，一些svg屬性被冷落的可讀性的緣故。

問題：我可以訪問和修改使用getElementById("node")的「節點」的元素，但如果我嘗試通過的childNodes或直接通過ID來訪問節點的孩子，或者通過getElementsByTagName似乎給我一個克隆元素實際上並不在DOM中。我說這導致我對孩子的任何改變都不會反映在屏幕上。

我該如何解決這個問題，謝謝？

Answer 1

您應該可以使用setAttribute！

您可以通過id找到要素。

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

或者您可以使用幫助類fot。所以適用類你的路像

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

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

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