使用getPointAtLength()将圆添加到路径的操作发生了移位

<svg width="200" height="200">
  <path id="path" d="M100,100 L200,100" fill="none" stroke="black" />
  <circle id="circle" cx="0" cy="0" r="10" fill="red" />
</svg>

<script>
  const path = document.getElementById('path');
  const circle = document.getElementById('circle');
  
  const pathLength = path.getTotalLength(); // 获取路径的总长度
  
  // 将圆添加到路径的起始位置
  const startPoint = path.getPointAtLength(0);
  circle.setAttribute('cx', startPoint.x);
  circle.setAttribute('cy', startPoint.y);
  
  // 移位圆到路径的指定长度处
  const targetLength = 50; // 指定长度值
  const targetPoint = path.getPointAtLength(targetLength);
  circle.setAttribute('cx', targetPoint.x);
  circle.setAttribute('cy', targetPoint.y);
</script>