SVG 更改每个单独绘图的圆周速度持续时间

Question

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

Answer 1

如果要引用 Jquery 中的任何圆圈，请使用 $('circle')。对于 ID 为 circle1 的圆圈，您使用 $('#circle1')（注意散列）。对于带有 class circle2 的任何圆圈，您使用 $('.circle2')（注意圆点）。我在第一个圆圈中添加了一个 id 并用它引用了它。对于第二个圈子，我保留了 circle2 class。第一个 $('circle').find('animateMotion').attr('dur', '1s'); 作用于所有圈子，但之后被覆盖。您可以将 circle2 class 添加到其他元素，但不能将 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>

SVG 更改每个单独绘图的圆周速度持续时间

SVG change circle speed duration for each separate drawing

html

svg

svg-animate

svg-animationelements