使用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>