Safari 中的 SVG SMIL 动画错误

SVG SMIL animation bug in Safari

本文关键字：动画 错误 SMIL SVG 中的 Safari      更新时间：2023-09-26

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

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

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

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

动画在动画运行前两次时效果很好，第三次我得到绿色星星而不是绿色支票。因此，彩色动画确实运行了，但形状动画没有运行。在那之后一切都错了。

有什么想法吗？

谢谢

我遇到了同样的问题，但我在这篇文章的帮助下解决了：诀窍是使用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/

相关文章：