title: SVG: Trigger a click event on animateTransform after clicking a button
body: <p>I would like to have my svg animation run when clicking an html button. I thought I could make that work by setting <code>begin="click</code> in my <code>animateTransform</code> and then trigger a click event on the <code>animateTransform</code> (or the svg element containing the <code>animateTransform</code>, I tried both) using js.
  Any advice would be a great help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var needle = $('#needle'),
    tape = $('#tape'),
    btn = $('#muhBtn');
  
  btn.on('click', function() {
    needle.click();
    tape.click();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tape {
    fill: #ED1C24;
  }
  
  #needle {
    fill: #8DC63F;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;svg version="1.1" id="Layer_1" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;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"&gt;
      &lt;circle cx="100" cy="100" r="100" class="background"/&gt;
      &lt;path class="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"&gt;
        &lt;animateTransform id="animateTape"
                            attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="0 100 100"
                            to="180 100 100"
                            dur="5s"
                            begin="click"
                            repeatCount="1"/&gt;  
        &lt;/path&gt;
      &lt;path d="M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100z" class="mask"/&gt;
        &lt;polygon class="st1" id="needle" points="96,100 104,100 104,192 100,200 96,192"&gt;
        &lt;animateTransform id="animateNeedle"
                            attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="0 100 100"
                            to="180 100 100"
                            dur="5s"
                            begin="click"
                            repeatCount="1"/&gt;
        &lt;/polygon&gt;
      &lt;/svg&gt;
  &lt;button class="btn btn-warning" id="muhBtn"&gt;Begin!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>