How to manipulate SVG element style with javascript?


Tags: javascript,html,css,svg

Problem :

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


Solution :

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


    CSS Howto..

    Bootstrap Carousel - how to fade between slides slowly

    How to layout images in a grid? [closed]

    CSS how to hide resize divs while keeping it centerd

    how to write a CSS rule that only applies if position:fixed is not supported or Jquery-test for position:fixed?

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How to override styles between parent - child elements using css selector?

    How to disable custom animations from click, angular?

    How can I get a CSS class selector to override the input[readonly] selector?

    How to make my div align in CSS?

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to add a custom CSS file in ExtJs 5?

    How do i prevent my CSS affecting external plugins?

    Custom CSS Form: How to achieve responsive underlined textarea?

    How do I keep multiple DIVs the same height using jQuery?

    how to wrap a text around a image?

    How to improve page loading which includes css and jquery files

    CSS - How to align content to middle using bootstrap?

    How to convert UPPERCASE text to Title Case using CSS

    divs hide and show

    How to make value text in form be italic

    How can I get my text to hug around the top of my image?

    How to hover over a div to change just a part of its background?

    How to animate the movement of inline-block items on page resize (ideally using css)?

    How to scale div using css animation in javascript

    How to make an image not overlap navigation bar in CSS/HTML [closed]

    CSS: How to decrease the margin of my paragraphs inside a div?

    AngularJS ng-show directive showing elements before hiding elements

    How to align right-to-left the elements of css menu

    W3.CSS how to get a standard header-[left-right]footer layout?