强制刷新 SVG 渐变答案

【问题标题】：Force refresh of SVG gradient强制刷新 SVG 渐变
【发布时间】：2015-11-29 21:14:46
【问题描述】：

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

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

这对于使用fill="currentColor" 的元素非常有效，但渐变填充的元素并没有接受更改。

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

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

【问题讨论】：

他们都在 Firefox 上为我改变了。在您的 UA 的 bugtracker 上报告错误。
啊，是的，目前只在 Chrome 中处理这个问题，应该想到这一点。
适用于我的 Edge、IE11 和 FF。不在 Chrome 中。
也适用于 Chrome 46.0.2490.86 (macOs 64-bit) 但不适用于 Opera 33 ...

标签： javascript svg linear-gradients

【解决方案1】：

这可能是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"});
 });

【讨论】：