用svg在曲线轨迹上实现元素根据轨迹滑动(动画效果)

第一种：
        利用svg中的<animateMotion>标签实现

<svg width="900px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path id="path1" stroke-width="2" fill="transparent" stroke="black" d="m289.77678,224.0641c-34,-14.79094 -285,-17.79094 -286,-106.50871c-1,-88.71777 415.99999,-110.3554 434.99999,-111.3554c19,-1 461.99999,9.12196 461.99999,101.42509c0,92.30313 -355,118.64808 -371,127.74564c-16,9.09756 -74,41.99652 -80,102.82927" />

  <circle r="5" fill="red" >
    <animateMotion dur="3s"  repeatCount="indefinite">
      <mpath href="#path1"/>
    </animateMotion>
  </circle>

</svg>

<path>标签中的 d是绘制图形轨迹的路径，id是为animateMotion标签中mpath标签提供指定id，

<animateMotion>的属性如下：

        dur:持续时长；

        repeatCount:重复次数，默认是一次，使用indefinite参数做永动；

        <mpath> 中的href指定path路径

轨迹运动

第二种：

        利用anime.js库实现

        1：npm安装anime.js包

npm i anime.js

        2：引入

import anime from 'animejs/lib/anime.es.js';

        3：创建元素

<div>
<svg width="900px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path class='pathsty' stroke-width="2" fill="transparent" stroke="black" d="m289.77678,224.0641c-34,-14.79094 -285,-17.79094 -286,-106.50871c-1,-88.71777 415.99999,-110.3554 434.99999,-111.3554c19,-1 461.99999,9.12196 461.99999,101.42509c0,92.30313 -355,118.64808 -371,127.74564c-16,9.09756 -74,41.99652 -80,102.82927" />
</svg>
<div class='green'></div>
</div>

 css

.green{
  position: absolute;
  top: 1px;
  left: 1px;
  width: 2rem;
  height: 2rem;
  background: rgba(9, 193, 98, 0.682);
}

      4:获取SVG的path路径以及圆点的dom元素

const elements = document.querySelector('.green'); //圆点元素
const pathsty = document.querySelector('.pathsty'); // svg中的path路径元素
const path = anime.path(pathsty); // 获取运动轨迹的路径

anime({
   targets: elements, // 指定运动的目标元素
   translateX: path('x'), 
   translateY: path('y'),
   rotate: path('angle'), // 曲线方向
   easing: 'linear', // 运动曲线
   duration: 10000, // 运动时间
   loop: true // 是否循环运动
});

     欢迎补充