SVG与动画-1-原理

[OndayX]

可以通过animateMotion的方法实现。

<svg viewBox="0 0 120 120" fill="#3d1" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path id="motionPath" d="M 40 30 Q 10,9 20,100 L 100 80 L60 40" stroke="red" stroke-dasharray="4 4" fill="none" stroke-width="1"></path>
  <circle id="circle" cx="0" cy="0" r="2" />
  <animateMotion
         id="circle"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#circle"
         dur="10s"
         begin="0s"
         fill="freeze"
         repeatCount="1"> 
       <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath" />  
   </animateMotion>
</svg>

————————————————
版权声明：本文为CSDN博主「页神建辑-思而后学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41993525/article/details/112797279