Trigger the SVG animation manually using JavaScript

We will show you how to start the animation with a custom event by simulating a click on the SVG element.

First, add the SVG with an object tag, like this:

<object id ="animated-svg" type="image/svg+xml" data="animated.svg"></object>

You can get to the SVG element in a few steps:

Get the object element : a = document.getElementById("animated-svg")

Get the content document : b = a.contentDocument

Copy the ID from the beginning of the SVG that looks like this <svg id="e5478wvxh25l1">. Please note that it will be different in your case so change it accordingly.

Use the ID to get to the SVG element:

c = b.getElementById("e5478wvxh25l1")

Now you can trigger the click to start the animation

c.dispatchEvent(new Event('click'));

Unfortunately, the SVG will animate on the first click only, due to implementation limitations.

We hope it helps!

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.