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，以百分比表示.8/.6/.8值，结束的RGB值表示为百分比。使用“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>