SVG为每个单独的绘图改变圆周速度持续时间答案

【问题标题】：SVG change circle speed duration for each separate drawingSVG为每个单独的绘图改变圆周速度持续时间
【发布时间】：2020-04-05 04:12:17
【问题描述】：

我有两个 SVG 路径动画，它们使用 <circle 让对象沿路径移动，如何根据每个路径分别更改它们的持续时间，例如，持续时间为 1s 的 circle1 和持续时间为 1s 的 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>

【问题讨论】：

标签： html svg svg-animate svg-animationelements

【解决方案1】：

如果您想在 Jquery 中引用任何圆圈，请使用 $('circle')。对于一个带有circle1 id 的圈子，您使用$('#circle1')（注意哈希）。对于类circle2 的任何圈子，您使用$('.circle2')（注意点）。我在第一个圆圈中添加了一个 id 并用它引用它。对于第二个圈子，我保留了circle2 类。第一个$('circle').find('animateMotion').attr('dur', '1s'); 作用于所有圈子，但之后会被覆盖。您可以将circle2 类添加到其他元素，但不能将circle1 id 添加到任何其他元素。

//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 id="circle1" 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。