SVG 动画在 Chrome 中正常工作，但在 Firefox 中不正常答案

【问题标题】：SVG animation working properly in Chrome but not in FirefoxSVG 动画在 Chrome 中正常工作，但在 Firefox 中不正常
【发布时间】：2014-08-12 15:50:59
【问题描述】：

SVG 动画在 chrome 中正常工作，但在 Firefox 中不正常。我试图在页面加载后 0.4 秒开始动画。这是代码

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
 <circle cx="150" cy="150" r="70">
        <animate dur="2s" attributeName="r" begin=".4" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate>
    </circle>
</svg>

我做错了什么？

【问题讨论】：

请准确描述出了什么问题，“不能正常工作”对读者帮助不大。
在Firefox中根本没有动画。
问题在于 begin=".4" 在这里查看jsfiddle.net/aTY4y
@Ann Reggie 感谢您的帮助！！！ :)

标签： google-chrome firefox svg svg-animate

【解决方案1】：

您的 begin 语法错误。尝试 0.4s 而不是 .4，它会起作用。语法是here，Firefox 精确地实现了它。我建议你在 Chrome 上提交一个错误，说明它工作不正常。

这是您的测试用例已更正...

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
 <circle cx="150" cy="150" r="70">
        <animate dur="2s" attributeName="r" begin="0.4s" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate>
    </circle>
</svg>

【讨论】：

这解决了我的问题，纯粹是我的错。谢谢你，谢谢你的帮助:)