强制刷新SVG渐变

Question

我有一个SVG，需要在页面加载后动态修改。

某些元素正在使用fill="currentColor"，而其他元素正在使用渐变填充，该填充在其stop-color="currentColor"元素中使用stop。我的想法是，我应该能够简单地更改父SVG的color属性，并且所有子元素也应该自动更改颜色。

这适用于使用fill="currentColor"的元素，但填充渐变的元素并未获得更改。

我可以做些什么来强制刷新？

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

Answer 1

这可能是webkit错误！由于linearGradient元素位于defs元素内，并且您的currentColor元素上使用的stop未被继承。您还可以定位linearGradient子<stop>元素stop-color属性。

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