Changing css fill for svg with JS

Question

I'm trying to change svg fill color, which is defined with css, using JS. For some reason it doesn't work. Here is my code:

SVG itself (in short):

<svg id="secondalert"><style>.cls-1{fill:#000000;}</style></svg>

And JS to target and change it:

function() {
    var svg_css = document.getElementsByClassName('.cls-1');

    if (random_value < 20) {
        svg_css.css({
            "fill": "#EF4136"
        });

    } else {
        svg_css.css({
            "fill": "#EF4136"
        });
    }
}

Something is not coming together, a fill color stays black as it is in style tag. What am I doing wrong?

How are you calling your function?, also over-riding inline styles generally requires an !important after the property. — Royalty, Aug 02 '17 at 15:03
Its jquery syntax, not pure javascript. Try `svg_css.style.fill = "#EF4136"` — RaV, Aug 02 '17 at 15:03
Possibly duplicate from [this](https://stackoverflow.com/questions/9872947/changing-svg-image-color-with-javascript) — JSEvgeny, Aug 02 '17 at 15:03
Possible duplicate of [Changing SVG image color with javascript](https://stackoverflow.com/questions/9872947/changing-svg-image-color-with-javascript) — JSEvgeny, Aug 02 '17 at 15:04

Luis Machillanda · Accepted Answer · 2017-08-02T15:17:24.470

2

Instead of using svg_css.css({"fill" : "#hexadecimal"}) you can use svg_css.style.fill = "#hexadecimal"

And also, when you use getElementsByClassName it returns an array, instead use getElementById or choose the element inside array:

svg_css = document.getElementsByClassName('.cls-1')[0];

edited Aug 02 '17 at 15:17

answered Aug 02 '17 at 15:02

Luis Machillanda

111
3

score 0 · Answer 2 · answered Aug 02 '17 at 15:13

Before we get to changing the style, there are a few things to watch out for:

var svg_css = document.getElementsByClassName('.cls-1');

Getting elements by class name is fine, but the . selector is specific to CSS. This means that svg_css will be set to any elements with the class of .cls-1 NOT cls-1.

Secondly, There are no elements with the class of cls-1 in your HTML. An element with such class would look like:

<svg id="secondalert" class="cls-1"></svg>

I'm guessing random_value is declared somewhere else, but you probably want a random value within that function.

What you need to do is get the elements by class name, then since that returns a list of elements, select which one you want (in our case the first one.) Then, to set the fill, use the style property which has a fill property.

var elements = document.getElementsByClassName('cls-1');
elements[0].style.fill = Math.random()*40 > 20 ? "blue" : "red";

<svg class="cls-1" width="100" height="100" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1417 1632h-1118v-480h-160v640h1438v-640h-160v480zm-942-524l33-157 783 165-33 156zm103-374l67-146 725 339-67 145zm201-356l102-123 614 513-102 123zm397-378l477 641-128 96-477-641zm-718 1471v-159h800v159h-800z"/></svg>

Changing css fill for svg with JS

2 Answers2