Anna Bannanna Anna Bannanna - 5 months ago 21
Javascript Question

How to manipulate SVG element style with javascript?

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");

Answer

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.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes