SVG Safari过滤器/动画错误

Question

我在Safari中的CSS动画上使用SVG过滤器时遇到问题。

http://codepen.io/robertjpotter/pen/AvzhL

问题是，在Safari中，过滤器会从已完成的动画中获取颜色。我所期望的，以及Chrome和Firefox中发生的事情，是过滤器会获取开始的动画颜色，然后与每个颜色一起动画到最终的颜色。

我是SVG的新手，所以非常感谢您的帮助。

Answer 1

这是如何重做动画的，以便使用animate元素在过滤器中进行。这个应该在Safari/Mac上运行，但我只在Chrome/Windows上测试过。我没有从HSL转换你的颜色，所以你应该用以百分比表示的起始RGB值替换.2/.1/.3，用以百分比表达的结束RGB值替换.8/.6/.8。使用"fakeSMIL"库实现IE10+兼容性(谷歌搜索)。

<filter id="dropGlow" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
<feColorMatrix type="matrix" values="1 0 0 0 0 
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0">
<animate attributeName="values" from="0 0 0 0 .2
0 0 0 0 .1 
0 0 0 0 .3 
0 0 0 1 0" 
to="0 0 0 0 .8 
0 0 0 0 .6 
0 0 0 0 .8 
0 0 0 1 0" 
begin="4s" fill="freeze" dur="1s"/>
</feColorMatrix>
</filter>