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
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 firstname.lastname@example.org and we will get back to you as soon as we can.