CODEWITHSUNDEEP
javascripthtmlcsssvg
Anna Bannanna
Anna Bannanna

Reputation: 135

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

Upvotes: 3

Views: 4872

Answers (1)

jessegavin
jessegavin

Reputation: 75640

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

Upvotes: 5

Related Questions