Menu
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).
485
SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.
To animate this path as if it's being drawn gradually and smoothly on the screen, you have to set the dash (and gap) lengths, using the stroke-dasharray attribute, equal to the path length. This is so that the length of each dash and gap in the dashed curve is equal to the length of the entire path.
How it create SVG Animations: Select the Frame you want to animate and click on Enable SVG Export. Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity. Use the built-in live-preview to tweak your animations until you're happy with the result.
SVGs are incredibly versatile, customizable, and can be animated inside of your apps for a unique effect. Rive, formerly known as Flare, is an animation software that can be used to easily create animated SVGs. The Rive Flutter package can then be used to seamlessly add the animations you create into your apps.
Here's an article that covers what you need:http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
Edit: link is removed. Archived copies:
In short:
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.
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); Start an SVG animation:
Without javascript, using the "event-value" type of the begin attribute="id.event" (without an "on" prefix) on an animation element; or
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px"> <rect x="10" y="10" width="100" height="100"> <animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" /> </rect> </svg> <button id="go">Go</button> (W3C 2018, "SVG Animations Level 2, Editor’s Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "event-value" value type, https://svgwg.org/specs/animations/#TimingAttributes
From javascript, by setting an animation element's begin attribute to "indefinite"; and calling beginElement() from script;
function go () { var elements = document.getElementsByTagName("animate"); for (var i = 0; i < elements.length; i++) { elements[i].beginElement(); } } <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px"> <rect x="10" y="10" width="100" height="100"> <!-- begin="indefinite" allows us to start the animation from script --> <animate attributeName="x" begin="indefinite" dur="2s" from="10" to="300" fill="freeze" /> </rect> </svg> <button onclick="go();">Go</button> (W3C 2018, "SVG Animations Level 2, Editor’s Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "indefinite" value type, https://svgwg.org/specs/animations/#TimingAttributes
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
