title: Change SVG animation speed dynamically without position jumping
body: <p>I have a simple SVG in which there is an element rotating around a circular path. When the user hovers, the rotation gets faster by changing the <em>dur</em> attribute. The problem is that the element jumps to a different position when it happens. How can this be solved?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('g').hover(
    function() {
      $(this).find('animateMotion').attr('dur', '3s');
    },
    function() {
      $(this).find('animateMotion').attr('dur', '7s');
    }
  );</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;svg width='500' height='500'&gt;
    &lt;g&gt;
      &lt;path id='circle' d='M 250, 250 m -200, 0 a 200,200 0 1,0  400,0 a 200,200 0 1,0 -400,0' fill='none' stroke='red' stroke-width='10' /&gt;
      &lt;circle cx="50" cy="50" r="40" fill="red" transform='translate(-50, -50)'&gt;
        &lt;animateMotion dur="7s" repeatCount="indefinite"&gt;
          &lt;mpath xlink:href="#circle" /&gt;
        &lt;/animateMotion&gt;
      &lt;/circle&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>