Svg: Trigger A Click Event On Animatetransform After Clicking A Button

I would like to have my svg animation run when clicking an html button. I thought I could make that work by setting begin='click in my animateTransform and then trigger a click eve

Solution 1:

If you want to start the animations just do it directly via javascript and the beginElement method, no need for all that click event rigmarole. Note that I've changed the begin on the animation from click to indefinite to make it clearer what's happening.

var needle = $('#animateNeedle'),
	tape = $('#animateTape');
	btn = $('#muhBtn');

btn.on('click', function(){
	needle[0].beginElement();
	tape[0].beginElement();
});

#tape{
  fill:#ED1C24;
}

#needle{
  fill:#8DC63F;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><?xml version="1.0" encoding="utf-8"?><svgversion="1.1"id="Layer_1"xmlns:x="&ns_extend;"xmlns:i="&ns_ai;"xmlns:graph="&ns_graphs;"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"width="200px"height="200px"viewBox="0 0 200 200"style="enable-background:new 0 0 200 200;"xml:space="preserve"><circlecx="100"cy="100"r="100"class="background"/><pathclass="st0"id="tape"d="M182.7,100c0,45.7-37,82.7-82.7,82.7V17.3C145.7,17.3,182.7,54.3,182.7,100z"><animateTransformid="animateTape"attributeName="transform"attributeType="XML"type="rotate"from="0 100 100"to="180 100 100"dur="5s"begin="indefinite"repeatCount="1"/></path><pathd="M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100z"class="mask"/><polygonclass="st1"id="needle"points="96,100 104,100 104,192 100,200 96,192"><animateTransformid="animateNeedle"attributeName="transform"attributeType="XML"type="rotate"from="0 100 100"to="180 100 100"dur="5s"begin="indefinite"repeatCount="1"/></polygon></svg><buttonclass="btn btn-warning"id="muhBtn">Begin!</button>