SVG动画无法在Chrome中工作

此动画在Firefox中完美工作...但不适用于Chrome。多边形不生成动画？ JSFiddle SVG动画无法在Chrome中工作

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

任何想法？

来源

2013-03-08 morphsd

Similar questions：http://stackoverflow.com/questions/11916796/chrome-bug-with-svg-polygon-animation和http://stackoverflow.com/questions/13530894/chrome-svg-animate-tag。 – 2013-03-19 15:18:33

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

Firefox也不支持某些svg功能。例如animateTransform标签，它是一个SVG标签的直接孩子Firefox和chrome不动画SVG，虽然W3文件说，应该动画SVG，

因此，这将是更好的测试SVG在opera，

来源

2013-03-09 19:42:24

animateTransform标签是svg标签的直接子标签，应该在Firefox中生成动画。如果你有一个非工作的测试用例，请在https://bugzilla.mozilla.org/ – 2013-03-09 20:48:48

确定一个bug，所以动画svg元素的animateTransform不是SVG 1.1（当前标准）的一部分。建议将它添加到SVG 2中，但目前这仍然是一项工作。 – 2013-03-09 21:50:12

@RobertLongson，对不起！但是我没有在http://www.w3.org/TR/SVG/struct.html#SVGElement中发现任何书面文档，说明animateTransform动画svg元素不是SVG 1.1的一部分。以任意顺序包含任意数量的以下元素：animateTransform存在于元素列表中，我在Opera中进行了测试，支持此动画。这是什么意思？歌剧实施错误的svg？ Plz回复... – 2013-03-10 03:50:23

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

<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-09 20:25:46

不，它不工作... – morphsd 2013-03-14 20:18:50

SVG动画无法在Chrome中工作

回答

相关问题