制作一个沿特定路径移动的SVG对象，但想用JavaScript jQuery更改路径上特定圆的属性，特别是每个路径的animateMotion持续时间，目前，该代码似乎没有使用按钮。我不确定此JS代码段是否真正代表了SVG属性的更改。持续时间已经在HTML中设置，但是如何修改已经存在的动画的属性？
是否应该通过设置来自javascript的属性并将HTML留空来制作整个动画？
function animate() {
var circle = $("circle1");
var circle2 = $("circle2");
circle.setattributeNS("dur",2);
circle2.setattributeNS("dur",4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="500" height="100">
<path fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle id="circle1" r="5" fill="brown">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 z" />
</circle>
</svg>
<svg width="500" height="100">
<path fill="none" stroke="lightgrey"
d="M20,50 z" />
<circle id="circle2" r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 z" />
</circle>
</svg>
<br/>
<input type="button" value="Change duration" onclick="animate();">