Question

我可以使用JS更改g组中所有元素的css样式，例如fill或stroke吗？这是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

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

I.E

g circle {color:#ff0000;}

在下面的小提琴中，我在你的圈子标签之间添加了一点点仅用于演示目的

这是http://jsfiddle.net/vTNrR/

的小提琴

或者使用jquery

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

这是JQuery方法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版http://jsfiddle.net/vTNrR/1/

的小提琴

Answer 2

你在做什么应该工作。这个对我有用。见这里：

http://jsfiddle.net/cSk3f/

然而，您正在从深灰色变为黑色，因此变化不是很明显。所以在我的演示中，我使用了绿色（rgb(30,80,30)）代替。

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

2 个答案: