html - How to manipulate SVG element style with javascript? - Stack Overflow

admin管理员组

文章数量:1431426

I've created an inline svg with a few rectangle elements and set the same color to all of them in css. I gave an id to each of them and now want to manipulate them with plain javascript in order to change the color of each rectangle. My javascript code does validate correct and I can see in the console that the rectangles are selected, but their color didn't change. Any suggestion on what I'm doing wrong and how I can fix it? Thanks in advance! Example of my html code:

<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"/>

My javascript code:

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

I've created an inline svg with a few rectangle elements and set the same color to all of them in css. I gave an id to each of them and now want to manipulate them with plain javascript in order to change the color of each rectangle. My javascript code does validate correct and I can see in the console that the rectangles are selected, but their color didn't change. Any suggestion on what I'm doing wrong and how I can fix it? Thanks in advance! Example of my html code:

<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"/>

My javascript code:

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

• javascript
• html
• css
• svg

Share Improve this question Follow edited Jun 15, 2016 at 5:36 Robert Longson 125k2727 gold badges267267 silver badges253253 bronze badges asked Jun 15, 2016 at 2:43 Anna BannannaAnna Bannanna 13533 silver badges1010 bronze badges 1

• What are you trying to change? The background of the element? – Harry Commented Jun 15, 2016 at 2:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

SVG elements use the fill property to color the background of the element, not color.

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

Read more about styling SVG elements here.
https://developer.mozilla/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

本文标签： htmlHow to manipulate SVG element style with javascriptStack Overflow