javascript - 使用 JS 更改 g 组中 SVG 元素的样式

Question

我可以使用 JS 为 g 组中的所有元素更改 css 样式，例如填充或描边吗？这是 svg、脚本和外部 CSS:

<g id="trajectories" class="trajectory">
    <circle id="tr1" cx="0" cy="0" r="75" />
    <circle id="tr2" cx="0" cy="0" r="110" />
    <circle id="tr3" cx="0" cy="0" r="160" />
    <circle id="tr4" cx="0" cy="0" r="230" />
    <circle id="tr5" cx="0" cy="0" r="350" />
    <circle id="tr6" cx="0" cy="0" r="475" />
    <circle id="tr7" cx="0" cy="0" r="625" />
    <circle id="tr8" cx="0" cy="0" r="750" />
</g>

function mouseDown() {

    svgElement = document.getElementById("trajectories");
    svgElement.style.stroke = "Black";

}

g.trajectory{
    fill: none;
    stroke: rgba(30,30,30,1);
    }

g 中的圆圈在首次绘制时继承类 g.trajectory 的填充和描边，但尝试更改 g 元素的样式没有任何效果。我可以单独更改圆圈的样式，但是否可以仅通过定位 g 元素来更改它们？

Answer 1

您尝试使用直接 css 定位 circle 吗？

即

g 圆 {color:#ff0000;}

在下面的 fiddle 中，为了演示目的，我在你的圈子标签之间添加了一点

这是 http://jsfiddle.net/vTNrR/ 的一个 fiddle

或者用jquery

$('#trajectories circle').css('color','#ff0000');

这是 JQuery 方法的 fiddle http://jsfiddle.net/vTNrR/4/

或者用javascript

var svgElement = document.getElementById("trajectories"); // get the parent node
var circles = svgElement.getElementsByTagName('circle'); // get child nodes 

你现在在 circles 中有一个元素数组，所以可以做类似的事情

for (var i=0;i<circles.length;i++)
{ 
  circles[i].style.color="#ff0000";
}

这是纯JS版本的 fiddle http://jsfiddle.net/vTNrR/1/