Is there an animation-play-state property in SVG animation?

user_14957417 0
Viewed 74

I am animating svg elements using <animate>. Is there an equivalent property to the animation-play-state property in CSS animation in SVG animation? I've looked at this documentation Mozilla docs and it seems that there isn't one, but I just want to make sure.

animation svg
1 Answers

This website Introduction to SMIL animation in SVG is useful. From it I learned that beginElement() and endElement() in a JavaScript script, can be used to start and end animations.

The begin attribute should be set to indefinite. An example is shown below.

JS

    function start(id){
    D.getElementById(id).beginElement()
    }

SVG

    <ellipse fill="lightpink" onclick="start('A')" cx="40" cy="140" rx="22" ry="14">
     <animate id="A" attributeName="cx" dur="3s" begin="indefinite" values="40;400;40"/>
    </ellipse>

If an animation tag A contains the attribute end="indefinite" then A.endElement() will succeed in terminating that animation.

Also, a JavaScript call to document.documentElement.pauseAnimations() will stop all SMIL animations within an SVG document, freezing objects at their current position.

document.documentElement.unpauseAnimations() resumes SMIL animations from whatever position they were paused at. More about pauseAnimations() and unpauseAnimations() here at W3C and MDN Docs: SVGSVGElement.

user_149574170
Related