[我有两个SVG路径动画,它们使用<circle
来使对象沿路径移动,如何分别根据每个路径来更改其持续时间,例如,持续时间为1s的circle1和持续时间为1的circle2持续2s?似乎更改圈子持续时间适用于所有圈子,而不适用于其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>
如果要引用Jquery中的任何圆,请使用$('circle')
。对于具有circle1
id的一个圆,请使用$('#circle1')
(请注意井号)。对于类别为circle2
的任何圆,请使用$('.circle2')
(注意点)。我在第一个圈子中添加了一个ID,并对其进行了引用。对于第二个圆圈,我保留了circle2
类。第一个$('circle').find('animateMotion').attr('dur', '1s');
作用于所有圆,但之后将被覆盖。您可以将circle2
类添加到其他元素,但是不能将circle1
id添加到任何其他元素。