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

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

1 Answer 1

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