Launch onclick animation svg event

Question

This following code works great when an SVG polygon has an initial start time. But I can't figure out how to run it using javascript / jquery without providing time for the "vbanim" animation.

$('button').click(function() { $('#v-b').beginElement(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click to draw</button> <svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800"> <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="2" id="vb" stroke-dasharray="3000"/> <animate xlink:href="#vb" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/> <animate xlink:href="#vb" attributeName="fill" from="transparent" to="rgba(130,130,130,0.6)" dur="1s" begin="vbanim.end" fill="freeze"/> </svg> 

I need a stroke-dashoffset and fill animation to happen only after the button is pressed and before that the SVG should not be visible at all. Thanks for the help.

Answer 1

Preferred working solution using beginElement () to trigger the animation endlessly when an event is created.

Note. The beginElement () function only works with the built-in javascript / not JQuery.

 $('button').click(function() { document.getElementById('vbanim').beginElement(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click to draw</button> <svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800"> <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="0" id="vb" stroke-dasharray="3000" /> <animate class="anim1" xlink:href="#vb" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/> <animate class="anim2" xlink:href="#vb" attributeName="fill" begin="vbanim.end" from="transparent" to="rgba(130,130,130,0.6)" dur="1s" fill="freeze"/> <animate class="anim3" xlink:href="#vb" attributeName="stroke-width" from="0" to="10" dur="0.2s" begin="vbanim.begin" fill="freeze" id=""/> </svg> 

Answer 2

Hi, I'm not sure what you want to achieve.

See link for sample code.

https://codepen.io/deibu21/pen/jYQLEO

What I did was that I created the class in the animate tag. then use attr () jquery to set the start attribute. See the code below.

 $('button').click(function() { $('svg animate.anim1').attr("begin", 2); $('svg animate.anim2').attr("begin", 3); }) 

Hope this helps.