CODEWITHSUNDEEP
javascriptsvglinear-gradients
Chris Brauckmuller
Chris Brauckmuller

Reputation: 343

Force refresh of SVG gradient

I have an SVG which needs to be modified dynamically after page load.

Some elements are using fill="currentColor" and others are using a gradient fill, which uses stop-color="currentColor" in its stop elements. The idea is that I should be able to simply change the color attribute of the parent SVG and all of the child elements should automatically change color too.

This works great for the elements which are using fill="currentColor", but the gradient-filled elements are not picking up the change.

Anything I can do to force a refresh?

https://jsfiddle.net/chrisAtFundrise/bb9c8gnh/

Upvotes: 3

Views: 1222

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

This might be a webkit bug! Since the linearGradient element is within a defs element, and you have currentColor used on your stop element which is not being inherited. You could also target the linearGradient children <stop> elements stop-color attribute.

https://jsfiddle.net/bb9c8gnh/10/

$("#button").on("click", function() {  
    $("svg").attr({color: "blue"});
    $("svg linearGradient stop").eq(0).attr({"stop-color": "blue", offset:"100%"});
    $("svg linearGradient stop").eq(1).attr({"stop-color": "blue"});
 });

Upvotes: 2

Related Questions