如何让SVG中固定X位置的图形贴合曲线路径调整Y坐标？

你的核心问题是用座位索引的间距偏移量取路径点，无法匹配A排座位的实际X坐标与曲线的对应关系。因为曲线的长度变化和X坐标并非线性关联，所以需要根据每个座位的当前X值，在曲线上精准查找对应的Y坐标，具体实现如下：

1. 实现X到Y的映射函数 #

通过二分法在曲线上高效查找与目标X匹配的点，返回其Y值：

function getYFromX(path, targetX) {
  const totalLength = path.getTotalLength();
  let left = 0;
  let right = totalLength;
  const precision = 0.1; // 可根据需求调整精度
  let mid, point;

  // 二分查找匹配X的路径点
  while (right - left > precision) {
    mid = (left + right) / 2;
    point = path.getPointAtLength(mid);
    if (point.x < targetX) {
      left = mid;
    } else {
      right = mid;
    }
  }
  // 返回最终匹配点的Y坐标
  point = path.getPointAtLength((left + right) / 2);
  return point.y;
}

2. 修改座位位置调整代码 #

直接使用每个座位的当前X坐标去查找对应的Y值，替换原有的索引偏移逻辑：

row.seats.forEach((seat) => {
  const currentX = seat.attr('cx'); // 获取座位固定的X坐标
  const curveY = getYFromX(curvePath, currentX);
  seat.attr('cy', curveY);
});

为什么原代码失效？ #

原代码中index * spacing是按座位索引的线性间距取路径长度偏移，这仅在路径是直线时有效。但曲线的长度变化和X坐标并非线性关系（比如曲线弯曲段，相同X增量对应的路径长度增量不同），导致取到的路径点X与座位实际X不匹配，最终出现偏移。

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