Safari中的SVG SMIL动画错误 [英] SVG SMIL animation bug in Safari

问题描述

我一直在看有关SVG动画的文章.

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

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

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

动画在前两次运行时效果良好，第三次我获得绿色星形而不是绿色复选标记.因此，彩色动画确实运行了，但形状动画却没有运行.之后，这都是错误的.

有什么问题的想法吗?

谢谢

解决方案

我遇到了同样的问题，但是我在 this的帮助下解决了帖子: 诀窍是使用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/

I've been looking at an article about SVG animations.

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

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

Works good except for in Safari desktop (and I guess also on iOS). The button should toggle between a yellow star and a green check symbol.

The animations work good the first two times the animation runs and the third time I get a green star instead of a green check. So the color animation did run but not the shape animation. After that it's all wrong.

Any ideas on whats wrong?

Thanks

解决方案

I had the same problem, but I solved with help from this post: the trick is restart the timing for the animation with shape your 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!";
  }

Here is an example in CODEPEN:

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

这篇关于Safari中的SVG SMIL动画错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！