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

如何用javascript操纵SVG元素样式？

1 个答案: