Изменение скорости анимации SVG динамически без перекоса положения

Question

У меня есть простой SVG, в котором есть элемент, вращающийся вокруг кругового пути. Когда пользователь зависает, вращение становится быстрее, изменяя атрибут dur. Проблема заключается в том, что элемент переходит в другую позицию, когда это происходит. Как это можно решить?

$('g').hover(
 
    function() { 
 
    $(this).find('animateMotion').attr('dur', '3s'); 
 
    }, 
 
    function() { 
 
    $(this).find('animateMotion').attr('dur', '7s'); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width='500' height='500'> 
 
    <g> 
 
    <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' /> 
 
    <circle cx="50" cy="50" r="40" fill="red" transform='translate(-50, -50)'> 
 
     <animateMotion dur="7s" repeatCount="indefinite"> 
 
     <mpath xlink:href="#circle" /> 
 
     </animateMotion> 
 
    </circle> 
 
    </g> 
 
</svg>

Answer 1

Настройка анимации временной шкалы так, чтобы анимация в той же точке.

var firstTime = true; 
 
$('g').hover(
 
    function() { 
 
    $(this).find('animateMotion').attr('dur', '3s'); 
 
    if (firstTime) { 
 
     firstTime = false; 
 
     return; 
 
    } 
 
    document.getElementById("root").setCurrentTime(
 
     document.getElementById("root").getCurrentTime() * 3/7); 
 
    }, 
 
    function() { 
 
    $(this).find('animateMotion').attr('dur', '7s'); 
 
    document.getElementById("root").setCurrentTime(
 
     document.getElementById("root").getCurrentTime() * 7/3);  } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="root" width='500' height='500'> 
 
    <g> 
 
    <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' /> 
 
    <circle cx="50" cy="50" r="40" fill="red" transform='translate(-50, -50)'> 
 
     <animateMotion dur="3s" repeatCount="indefinite"> 
 
     <mpath xlink:href="#circle" /> 
 
     </animateMotion> 
 
    </circle> 
 
    </g> 
 
</svg>