强制刷新 SVG 渐变

Question

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/

Answer 1

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