强制刷新 SVG 渐变

Question

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

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

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

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

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

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

强制刷新 SVG 渐变

Force refresh of SVG gradient

javascript

svg

linear-gradients