如何操作JavaScript的SVG元素樣式？

Question

我創建了一個帶有幾個矩形元素的內嵌svg，並在css中爲它們設置了相同的顏色。我給他們每個人一個id，現在想用純JavaScript來操縱他們，以改變每個矩形的顏色。我的javascript代碼確實是正確的，我可以在控制檯中看到矩形被選中，但它們的顏色沒有改變。任何關於我在做什麼錯誤的建議以及我如何解決它？提前致謝！的我的HTML代碼 示例：

<rect id="rect1" width="40" height="230" x="20" y="170" rx="10"/> 
<rect id="rect2" width="40" height="300" x="60" y="100" rx="10"/> 

我的JavaScript代碼：

var rect1 = document.getElementById("rect1"); 
console.log(rect1); 
rect1.setAttribute("style", "color: red"); 

Answer 1

SVG元素使用fill屬性來着色元素，而不是color的背景。

rect1.setAttribute("style", "fill: red"); 

瞭解更多關於樣式化SVG元素的信息。
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes