使用setInterval或requestAnimationFrame在路径上移动SVG圆

<svg id="mySvg" width="400" height="400">
  <circle id="myCircle" cx="50" cy="50" r="20" fill="red" />
</svg>

// 使用setInterval实现移动动画
let angle = 0;
const radius = 100;
const speed = 1; // 移动速度
const intervalTime = 10; // 间隔时间

const myCircle = document.getElementById("myCircle");

setInterval(() => {
  // 计算圆形在路径上的新位置
  const x = 200 + radius * Math.cos(angle);
  const y = 200 + radius * Math.sin(angle);

  // 移动圆形到新位置
  myCircle.setAttribute("cx", x);
  myCircle.setAttribute("cy", y);

  // 更新角度
  angle += speed * Math.PI / 180;
}, intervalTime);

// 使用requestAnimationFrame实现移动动画
let angle = 0;
const radius = 100;
const speed = 1; // 移动速度

const myCircle = document.getElementById("myCircle");

function animate() {
  // 计算圆形在路径上的新位置
  const x = 200 + radius * Math.cos(angle);
  const y = 200 + radius * Math.sin(angle);

  // 移动圆形到新位置
  myCircle.setAttribute("cx", x);
  myCircle.setAttribute("cy", y);

  // 更新角度
  angle += speed * Math.PI / 180;

  // 递归调用动画函数
  requestAnimationFrame(animate);
}

// 启动动画
animate();