如何基于0-1数值控制SVG对象沿半圆弧路径从起点移动到终点

你的核心问题在于之前用线性的left = p来计算X轴位置，但绿色SVG是一个椭圆弧，而非直线，所以需要用椭圆的参数方程来精确计算路径上的点坐标，而不是分段线性近似。同时，之前的transform设置存在误区，应该用元素自身的居中偏移来确保蓝色SVG的中心对齐路径点。

解决方案思路 #

1. 确定椭圆参数：从你的绿色SVG路径中提取椭圆的关键参数：
   • 圆心坐标：(cx=136, cy=124.5)（基于SVG的viewBox="0 0 272 125"）
   • 长半轴（X轴方向）：a=129.2（左右端点到圆心的距离）
   • 短半轴（Y轴方向）：b=124.5（顶部端点到圆心的距离）
2. 参数方程计算坐标：用角度映射value（0-1）到椭圆上的点：
   • 当value=0时，对应椭圆左侧端点，角度为π（180°）
   • 当value=1时，对应椭圆右侧端点，角度为0（0°）
   • 中间值按角度线性过渡，通过椭圆参数方程计算精确坐标
3. 坐标转容器百分比：将SVG内部坐标转换为相对.root容器的百分比位置
4. 元素居中对齐：用transform: translate(-50%, -50%)让蓝色SVG的中心对齐路径点（替代你之前错误的transform逻辑）

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .root { position: relative; width: 20rem; }
    .ellipse-1 { width: 100%; height: auto; box-sizing: border-box; padding: 0.3rem; }
    .ellipse-2 { width: 1.5rem; height: auto; }
    .ellipse-2-container { position: absolute; left: 0; bottom: 0; display: flex; }
  </style>
</head>
<body>
<div class="root">
  <svg class="ellipse-1" xmlns="http://www.w3.org/2000/svg" width="272" height="125" viewBox="0 0 272 125" fill="none">
    <path d="M265.2 124.5C268.956 124.5 272.021 121.452 271.797 117.703C269.975 87.1607 255.916 58.2064 232.167 36.4652C206.662 13.1169 172.069 2.4929e-06 136 0C99.9306 -2.4929e-06 65.3384 13.1169 39.8335 36.4652C16.084 58.2064 2.0254 87.1607 0.202617 117.703C-0.0211153 121.452 3.04446 124.5 6.8 124.5C10.5555 124.5 13.5766 121.451 13.8251 117.704C15.6319 90.4658 28.2517 64.6746 49.4501 45.2687C72.4046 24.2552 103.538 12.45 136 12.45C168.463 12.45 199.595 24.2552 222.55 45.2687C243.748 64.6746 256.368 90.4658 258.175 117.704C258.423 121.451 261.444 124.5 265.2 124.5Z" fill="green">
    </path>
  </svg>
  <div class="ellipse-2-container" id="ellipse-2-container">
    <svg class="ellipse-2" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
      <path d="M27.1759 15C27.1759 21.9292 21.6265 27.5 14.838 27.5C8.04943 27.5 2.5 21.9292 2.5 15C2.5 8.07077 8.04943 2.5 14.838 2.5C21.6265 2.5 27.1759 8.07077 27.1759 15Z" fill="blue">
      </path>
    </svg>
  </div>
</div>

<script>
async function main() { 
  let value = 0; // from 0 to 1 
  while (value < 1) { 
    await new Promise((resolve) => { window.setTimeout(resolve, 10); }); 
    value += 0.01; 
    move(value); 
  } 
}

function move(value) {
  // 椭圆核心参数（从SVG路径和viewBox提取）
  const cx = 136;
  const cy = 124.5;
  const a = 129.2; // X轴长半轴
  const b = 124.5; // Y轴短半轴
  const svgWidth = 272;
  const svgHeight = 125;

  // 将value映射为椭圆上的角度：0→π（左侧），1→0（右侧）
  const theta = Math.PI * (1 - value);

  // 计算椭圆上的点坐标（SVG坐标系）
  const x = cx + a * Math.cos(theta);
  const y = cy - b * Math.sin(theta);

  // 转换为相对.root容器的百分比
  const leftPercent = (x / svgWidth) * 100;
  const bottomPercent = ((svgHeight - y) / svgHeight) * 100;

  // 更新元素位置，translate(-50%,-50%)确保元素中心对齐路径点
  const element = document.getElementById("ellipse-2-container");
  element.style.left = `${leftPercent}%`;
  element.style.bottom = `${bottomPercent}%`;
  element.style.transform = `translate(-50%, -50%)`;
}

main();
</script>
</body>
</html>

关键说明 #

• 精确路径计算：椭圆参数方程确保蓝色SVG严格沿绿色椭圆弧移动，替代了你之前的分段线性近似，避免了路径偏移
• 正确的transform逻辑：translate(-50%, -50%)是基于元素自身宽高的偏移，确保元素中心对齐目标点，解决了你之前transform参数混淆容器百分比和元素百分比的问题
• JS主导控制：完全通过JS的value参数控制位置，支持单次设置数值（比如直接调用move(0.3)就能让元素跳到30%的位置）

内容的提问来源于stack exchange，提问作者Amaimersion