title: Stop/Start SVG-Rotation via Javascript
body: <p>I need a little bit of help. 
  In the following code, I want to control the rotation of the star via onmouse-event. </p>
  
  <p>If you move the mouse over the star, it is supposed to rotate. </p>
  
  <p>I thought about changing the <code>transform</code> in <code>attributeName</code> to something different when the mouse is not over the star via <code>roationon()/off()</code> functions so that the rotation doesn't work but I have no idea how to do that.</p>
  
  <p>I appreciate every help I can get.</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
  &lt;script&gt;
  function rotationon() {}
  function rotationoff() {}
  &lt;/script&gt;
  
  &lt;svg height="2000" width="2000"&gt;
  &lt;polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" transform="translate(100, 100)" onmouseover="rotationon()" onmouseout="rotationoff()" &gt;
  &lt;animateTransform
          attributeName="transform"
          begin="0s"
          dur="5s"
          type="rotate"
          from="0 100 100"
          to="360 100 100"
          repeatCount="indefinite" 
      /&gt;
      &lt;/polygon&gt;
  &lt;/svg&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>