使用javascript選擇和操作SVG的g元素

Question

如何按類選擇g組中的所有路徑？例如

<svg> 
... 
<g 
class="myClass" 
... 
<path 
... 
/> 

在JavaScript中，如何選擇myClass中的所有路徑？

Answer 1

你可以用通常的DOM方法，如querySelector，getElementsByTagName，getElementsByClassName，...

function randHexColor() { // Be aware it can produce invalid colors 
 
    return '#' + (Math.random()*Math.pow(2,8*3)|0).toString(16); 
 
} 
 
var svg = document.getElementById('svg'), 
 
    paths = svg.querySelectorAll('.myClass > path'); 
 
for(var i=0; i<paths.length; ++i) { 
 
    paths[i].style.fill = randHexColor(); 
 
}

<svg id="svg" height="200" width="350"> 
 
    <g class="myClass" transform="scale(50)" fill="orange" > 
 
    <path d="M 1,1 3,1 2,3 Z" /> 
 
    <path d="M 4,1 6,1 5,3 Z" /> 
 
    </g> 
 
</svg>