javascript - Safari 中的 SVG SMIL 动画错误

Question

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

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

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

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

动画在前两次运行时效果很好，第三次我得到一个绿色星号而不是绿色勾号。所以颜色动画确实运行了，但形状动画没有运行。之后一切都错了。

有什么问题吗？

谢谢

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