Change SVG animation speed dynamically without position jumping - animation

Question

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 dur attribute. The problem is that the element jumps to a different position when it happens. How can this be solved?
$('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

Adjust the animation timeline so that the animation is at the same point.
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>