SVG 动画在 chrome 中不起作用答案

【问题标题】：SVG animation doesn't work in chromeSVG 动画在 chrome 中不起作用
【发布时间】：2013-02-24 13:56:51
【问题描述】：

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

有什么想法吗？

【问题讨论】：

类似问题：stackoverflow.com/questions/11916796/… 和 stackoverflow.com/questions/13530894/chrome-svg-animate-tag。

标签： google-chrome animation svg

【解决方案1】：

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

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

所以最好在opera 中测试你的svg，

【讨论】：

animateTransform 标签是 svg 标签的直接子标签，应该在 Firefox 中进行动画处理。如果您的测试用例无法正常工作，请在 bugzilla.mozilla.org 中提出错误
好的，所以为 svg 元素设置动画的 animateTransform 不是 SVG 1.1（当前标准）的一部分。建议将其添加到 SVG 2 中，但目前仍在进行中。
@RobertLongson，对不起！但我没有发现任何书面文档表明 animateTransform 为 svg 元素设置动画不是 w3.org/TR/SVG/struct.html#SVGElement 中 SVG 1.1 的一部分。任意数量的以下元素，以任意顺序：元素列表中有 animateTransform，我在 Opera 中测试过，支持此动画。这是什么意思？ Opera 错误地实现了 svg ？请回复...
“animateTransform”元素为目标元素上的变换属性设置动画。
我问的是解决方案，而不是为什么它不起作用的原因 :) 但无论如何谢谢 :)

【解决方案2】：

好的，让我再试一次 - 没发现您只是在看 Polygon。看起来 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 不喜欢空的过滤器。

【讨论】：