Question

此动画在Firefox中完美运行......但不适用于Chrome。多边形没有动画？ JSFiddle

<polygon fill="url(#grad1)" points="503,275 529,275 529,275 503,275">
    <animate attributeName="points"
         calcMode="linear"
         begin="1s" dur="0.4s"
         from="503,275 529,275 529,275 503,275"
         to="503,275 529,275 843,335 789,335"
         fill="freeze"/>

有什么想法吗？

Answer 1

Chrome（最高版本25.0.1364.152）不完全支持svg。

Firefox也不支持某些svg功能。例如，animateTransform标记是svg标记的直接子标记，不会为Firefox和chrome中的svg设置动画，虽然W3文档说它应该为svg设置动画，

所以最好在opera，

中测试你的svg

Answer 2

好的让我再试一次 - 没注意到你只是看着Polygon。看起来动画不能直接在Chrome中的多边形上工作，但是您可以通过在形状上放置过滤器并为过滤器区域设置动画来获得相同的效果。这有点hacky，但它可以让你到达你想要的地方：

   <filter id="animateClip" x="0%" y="0%" width="100%" height="0%">
         <animate attributeName="height"
         attributeType="XML"
         calcMode="linear"
         dur="1s"
         from="0%"
         to="100%"
         fill="freeze"/>
        <feColorMatrix type="identity"/>
    </filter>

colormatrix只是为了给出过滤结果。 Chrome不喜欢空滤镜。

SVG动画在chrome中不起作用

2 个答案: