0

该动画在 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"/>

有任何想法吗？

4

2 回答 2

1

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

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

所以最好测试你的svg opera，

于 2013-03-09T19:42:24.633 回答
0

好的，让我再试一次 - 没发现你只是在看多边形。看起来 animate 不能直接在 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>

颜色矩阵只是为了给出过滤结果。Chrome 不喜欢空的过滤器。

于 2013-03-09T20:25:46.937 回答