使用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.trajectory的填充和中風的時候第一次繪製，而是試圖改變g組件的造型什麼都不做。我可以單獨更改圓圈的樣式，但是是否可以通過定位g元素來更改它們？

Answer 1

您試過直接使用circle作爲目標css？

IE

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)）。