强制刷新SVG渐变

Force refresh of SVG gradient

本文关键字：渐变 SVG 刷新      更新时间：2023-09-26

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

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

这对于使用fill="currentColor"的元素非常有效，但渐变填充的元素没有察觉到变化。

我能做些什么来强制刷新吗？

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

这可能是webkit错误！由于linearGradient元素在defs元素中，并且您在未继承的stop元素上使用了currentColor。您还可以针对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"});
 });
相关文章：