Angular 如何在不更改元素的情况下更改SVG动画持续时间'；什么位置在小路上？

我正在尝试在Angular 9中实现轨迹模拟。在这个非常简单的例子中，滑冰者开始时的预计完成时间为10秒

<svg:circle r="10" fill="red" stroke-width="2" stroke="#00a2c1">
    <svg:animateMotion
        [attr.dur]="duration" 
        begin="0s"
        path="M 450 440 L 740 440 A 50 50 0 1 0 740 100 L 450 100 L 200 100 A 50 50 0 1 0 200 440 L 450 440"
        repeatCount="2" 
        calcMode="linear"
        fill="freeze"
    />
</svg:circle>

现在问题来了：更改当前路径动画的持续时间时，将重新计算整个路径，并将点跳回到路径上（请参见）

如何在不将圆从当前位置移动的情况下更新/修改路径持续时间

---

我想要的行为是，当测量的时间比初始值慢时，点在轨道上“等待”。当测得的时间快于点在路径上快进时。。。有什么方法可以做到这一点吗？

如果我们在2秒后将持续时间增加一倍，那么在新的时间线中，我们需要4秒

//编写Javascript代码！
const anim=document.getElementById（'anim'）；
const svg=document.getElementsByTagName（'svg'）[0]；
设置超时（（）=>{
控制台日志（“更改”）
动画设置属性（'dur'，'20s'）；
svg.setCurrentTime（4）；
}, 2000);
如果我们在2秒后将持续时间延长一倍，那么在新的时间线中，我们需要4秒


//编写Javascript代码！
const anim=document.getElementById（'anim'）；
const svg=document.getElementsByTagName（'svg'）[0]；
设置超时（（）=>{
控制台日志（“更改”）
动画设置属性（'dur'，'20s'）；
svg.setCurrentTime（4）；
}, 2000);

您可以反复调用setCurrentTime来调整内容。@RobertLongson我已经试过了，但setCurrentTime在当前持续时间内有效。当我更改路径持续时间时，setCurrentTime没有帮助，因为我失去了上一个位置。或者你是什么意思？@RobertLongson请在这里查看（）现在是纯JS，SVGyou可以反复调用setCurrentTime来调整内容。@RobertLongson我已经尝试过了，但setCurrentTime在当前持续时间内工作。当我更改路径持续时间时，setCurrentTime没有帮助，因为我失去了上一个位置。或者你是什么意思？@RobertLongson请在这里查看（）现在是纯JS和SVGT非常感谢你！当你看到它时，它是如此简单和合乎逻辑…非常感谢你！当你看到它时，它是如此简单和合乎逻辑。。。
public duration:string = '10s';

ngOnInit() {
    setTimeout(() => {
        this.duration = '20s';
        this.changeDetectorRef.detectChanges(); 
    }, 2000);
}