带事件的SVG触发动画 [英] SVG trigger animation with event

问题描述

如何触发 svg animate 元素以通过具有任意事件的 javascript 开始动画?我正在想象像 begin="mySpecialEvent" 这样的东西，然后我可以发送 mySpecialEvent 并且动画将开始(如果已经播放，则再次开始).

how do I trigger an svg animate element to begin animating via javascript with an arbitrary event ? I'm imagining something like begin="mySpecialEvent", then later I can send mySpecialEvent and the animation will start (or start again if it has already played).

推荐答案

这是一篇涵盖您需要的文章:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

Here's an article that covers what you need:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

链接已删除.存档副本:

link is removed. Archived copies:

• https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.htmlhtml
• http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques

简而言之:

1. 使用 begin="indefine" 创建 以便它不会将动画视为在文档加载时开始.您可以通过 JavaScript 或原始 SVG 源执行此操作.

1. Create the <animation> with begin="indefinite" so that it won't treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source.

调用 beginElement()SVGAnimationElement 实例( 元素)上的 a>.对于您的用例，当您准备好时，使用标准的 addEventListener() 回调来调用此方法，例如

Call beginElement() on the SVGAnimationElement instance (the <animate> element) when you're ready for the animation to start. For your use case, use a standard addEventListener() callback to invoke this method when you're ready, e.g.

myAnimationElement.addEventListener('mySpecialEvent',function(){
  myAnimationElement.beginElement();
},false);

这篇关于带事件的SVG触发动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！