Question

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

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

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

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

Answer 1

这是重做动画的方法，因此它使用animate元素在过滤器中发生。这个应该在Safari / Mac上运行 - 但我只在Chrome / Windows上测试过它。我没有从HSL转换你的颜色，所以你应该将.2 / .1 / .3替换为以百分比表示的起始RGB值和.8 / .6 / .8值，结束RGB值表示为百分比。使用“fakeSMIL”库来实现IE10 +兼容性（google for it）。

<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>

SVG Safari过滤器/动画bug

1 个答案: