我有两个SVG路径动画,它们使用<circle
来使对象沿路径移动,如何分别根据每个路径来更改其持续时间,例如,持续时间为1s的circle1和持续时间为2秒的circle2?似乎更改圈子持续时间适用于所有圈子,而不适用于其id-s
//Working
$('circle').find('animateMotion').attr('dur','1s');
//Not working
$('circle1').find('animateMotion').attr('dur','1s');
$('circle2').find('animateMotion').attr('dur','2s');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="300" height="150">
<path id="motionPath1"
d="M 10 80 Q 52.5 10,95 80 T 180 80"
stroke="black" fill="transparent" />
<circle class="circle" r=10 fill=red>
<animateMotion dur="10s" repeatCount="indefinite">
<mpath href="#motionPath1" />
</animateMotion>
</circle>
</svg>
<svg width="300" height="150">
<path id="motionpath2"
d="M 10 80 Q 52.5 10,95 80 T 180 80" stroke="black" fill="transparent"/>
<circle class="circle2" r=10 fill=red>
<animateMotion dur="20s" repeatCount="indefinite"
rotate="auto">
<mpath href="#motionpath2" />
</animateMotion>
</circle>