Question

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

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

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

除了在Safari桌面上工作正常（我猜也在iOS上）。该按钮应在黄色星号和绿色复选符号之间切换。

动画在动画运行的前两次运行良好，第三次我获得绿色星而不是绿色支票。所以颜色动画确实运行但不是形状动画。之后，这一切都错了。

关于什么错误的想法？

由于

Answer 1

我遇到了同样的问题，但我在this post的帮助下解决了问题：诀窍是重新启动动画的时间，形状为你的svg inits：

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/

Safari中的SVG SMIL动画错误

1 个答案: