Safari 中的 SVG SMIL 动画错误答案

【问题标题】：SVG SMIL animation bug in SafariSafari 中的 SVG SMIL 动画错误
【发布时间】：2016-06-02 07:59:47
【问题描述】：

我一直在看一篇关于 SVG 动画的文章。

Code: http://codepen.io/chriscoyier/pen/DpFfE

文章：http://css-tricks.com/svg-shape-morphing-works/

除了在 Safari 桌面上（我猜在 iOS 上也是）外，效果很好。该按钮应在黄色星形和绿色复选符号之间切换。

动画运行的前两次效果很好，第三次我得到一个绿色星而不是绿色检查。所以颜色动画确实运行了，但形状动画没有运行。之后就全错了。

有什么想法吗？

谢谢

【问题讨论】：

将其作为 webkit 错误报告给 webkit 错误跟踪器。
完成。但与此同时，关于如何以另一种方式做到这一点并让它在野生动物园中工作的任何想法？最好没有像 snap.svg 这样的大型库
我在这个方法上取得了小小的成功：调用 svgroot.pauseAnimations() 调用 svgroot.setCurrentTime(0) 调用 svgroot.unpauseAnimations() 在这个线程中推荐：stackoverflow.com/questions/10942013/…稍微更新了代码笔codepen.io/anon/pen/raZGVW

标签： javascript svg

【解决方案1】：

我遇到了同样的问题，但我在this post 的帮助下解决了：诀窍是用你的 svg 初始化重新开始动画的时间：

var variconMorphID = document.getElementById("navbar-icon-hot");

var animationToHome = document.getElementById("morph-to-home");
var animationToFire = document.getElementById("morph-to-fire");

if (button.classList.contains("saved")) {
    button.classList.remove("saved");
    animationToFire.beginElement();
    buttonText.innerHTML = "Save";
  } else {
    button.classList.add("saved");

    variconMorphID.pauseAnimations();
    variconMorphID.setCurrentTime(0);
    variconMorphID.unpauseAnimations();

    animationToHome.beginElement();
    buttonText.innerHTML = "Saved!";
  }

这是 CODEPEN 中的一个示例：

http://codepen.io/jesuscmd/details/wWBEgR/

【讨论】：