javascript - 如何使用 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