使用JS更改g組中SVG元素的樣式

可以使用JS更改g組中所有元素的CSS樣式（例如填充或描邊）嗎？這裏的SVG，腳本和外部CSS：使用JS更改g組中SVG元素的樣式

<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元素來更改它們？

來源

2014-02-08 Peter K

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

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/

來源

2014-02-08 00:48:19 Darren

太好了，謝謝！我要去用javascript :) –

很酷。如果它能正常工作並回答您的問題，請將其標記爲已回答:) – Darren

你在做什麼應該工作。這個對我有用。在這裏看到：

http://jsfiddle.net/cSk3f/

但是你從暗灰色到黑色變化的，所以變化不是很明顯。所以在我的演示中，我使用了綠色（rgb(30,80,30)）。

來源

2014-02-08 07:47:13

謝謝！這似乎是一個瀏覽器問題，由於某些原因，Opera的子元素似乎不會繼承g元素中已更改的樣式，但使用Firefox它可以工作...... –

使用JS更改g組中SVG元素的樣式

回答

相關問題