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
– Royalty, Commented Aug 2, 2017 at 15:03
Its jquery syntax, not pure javascript. Try svg_css.style.fill = "#EF4136" — RaV
– RaV, Commented Aug 2, 2017 at 15:03
Possible duplicate of Changing SVG image color with javascript — JSEvgeny
– JSEvgeny, Commented Aug 2, 2017 at 15:04

Luis Machillanda · Accepted Answer · 2017-08-02 15:17:24Z

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 2, 2017 at 15:17

answered Aug 2, 2017 at 15:02

Luis Machillanda

1113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Namaskar · Accepted Answer · 2017-08-02 15:13:45Z

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>

Collectives™ on Stack Overflow

Changing css fill for svg with JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related