I have the following piece of code, that animates an SVG circle on click:
<circle id = "middle" cx="235" cy="235" r="100" stroke="yellow" stroke-width="0.5" fill="#ffcc00"> <animate begin="click" attributeName="fill" to="yellow" dur="1s"/>
It works fine when the user clicks inside the circle, but I would like to trigger the animation programmatically.
I tried $("#middle").click();
, but the animation doesn't occur, even though the click event is issued. (I have also set $("#middle").click(function() {
audio.play();
});
and the sound is played all right).
Is there a way to animate the SVG by simulating the user click (on the SVG), without using an HTML button?
Call beginElement if you want to start an animation programatically.
<svg>
<circle id = "middle" cx="50" cy="50" r="25" stroke="yellow" stroke-width="0.5" fill="#ffcc00">
<animate id="a" begin="click" attributeName="fill" to="yellow" dur="1s"/>
</circle>
</svg>
<button onclick="document.getElementById('a').beginElement();">>Click Me!</button>