强制刷新SVG渐变

Question

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

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

对于使用fill="currentColor"的元素很好用，但是使用渐变填充的元素没有改变颜色。

是否有任何方法可以强制刷新？

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

- Chris Brauckmuller

---

它们在Firefox上对我都有变化。请在您的UA错误跟踪器上报告一个错误。 - Robert Longson

啊，是的，到目前为止我只在Chrome上工作过，应该想到这一点。 - Chris Brauckmuller

在我的电脑上，Edge、IE11和FF可以运行，但是Chrome不行。 - CoderPi

也适用于Chrome 46.0.2490.86（macOS 64位），但不适用于Opera 33... - Kaiido

Answer 1

这可能是一个webkit的bug！由于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"});
 });

- Jonathan Marzullo