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.

The following instructions will not work with a regular index.html file loaded into the browser. The file must be opened in the browser through a webserver. Just clone and start our functional example called trigger-animation from github. It has a http-server that loads index.html with an animated SVG and a button that triggers the animation.

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'));

Now your SVG will animate everytime you dispatch a click event.

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.