Safari中SVG SMIL动画故障问题

Question

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

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

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

在Safari桌面版（以及iOS上）存在一些问题。

按钮应该在黄色星形和绿色勾号之间切换。

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

有什么想法吗？

谢谢

- badtant

---

将其报告为一个 WebKit 的 bug 给 WebKit 的 bug 追踪器。 - undefined

完成。但同时，有没有其他方法可以在Safari中实现并使其正常工作？最好不要使用像Snap.svg这样的大型库。 - undefined

我对这种方法有一些小小的成功： 调用svgroot.pauseAnimations() 调用svgroot.setCurrentTime(0) 调用svgroot.unpauseAnimations() 在这个帖子中推荐： http://stackoverflow.com/questions/10942013/smil-animations-fail-on-dynamically-loaded-external-svg稍微更新的codepen http://codepen.io/anon/pen/raZGVW - undefined

Answer 1

我曾经遇到过同样的问题，但是在这篇文章的帮助下解决了：

关键是用形状初始化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/

- Jesus CMD