js svg语音波动动画,SVG触发动画与事件

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).

解决方案

Edit: link is removed. Archived copies:

In short:

Create the 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.

Call beginElement() on the SVGAnimationElement instance (the 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);