JavaScript如何计算两个SVG路径的最小距离及方向向量

完全可以通过JavaScript实现两条SVG路径的最小距离计算，同时也能获取最短距离对应的方向向量，基于浏览器原生SVG API即可完成，无需额外依赖。

• 路径坐标提取：利用SVG路径原生的getTotalLength()方法获取路径总长度，通过getPointAtLength()方法直接获取路径上任意长度位置对应的渲染坐标，无需手动解析路径d属性的各类语法（直线、贝塞尔曲线、圆弧等均可兼容）。
• 最小距离查找：先采用低密度粗采样快速定位最短距离所在的大致区间，再通过二分迭代逐步缩小搜索范围，直到计算精度满足需求，平衡性能和计算准确度。
• 方向向量计算：拿到两条路径上距离最短的两个点坐标后，两点坐标的差值即为从路径1最短点指向路径2最短点的方向向量，向量的模长就是最短距离值。

样式部分 #

path {
  fill: none;
}

SVG结构 #

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="60">
  <path id="path1" d="M0,0 Q30,30,0,60" stroke="black"></path>
  <path id="path2" d="M70,0 Q30,30,70,60" stroke="black"></path>
  <path id="shortestLine" stroke="red"></path>
</svg>

JS逻辑实现 #

/**
 * 计算两条SVG路径的最短距离、对应点坐标与方向向量
 * @param {SVGPathElement} path1 第一条路径元素
 * @param {SVGPathElement} path2 第二条路径元素
 * @param {number} precision 计算精度，单位px，默认0.01
 * @returns {Object} 计算结果
 */
function getPathMinDistance(path1, path2, precision = 0.01) {
  const totalLen1 = path1.getTotalLength();
  const totalLen2 = path2.getTotalLength();
  // 粗采样步长取最长路径的1%
  const sampleStep = Math.max(totalLen1, totalLen2) * 0.01;
  let minDist = Infinity;
  let bestPos1 = 0, bestPos2 = 0;

  // 第一轮粗采样，定位最短距离的大致区间
  for (let pos1 = 0; pos1 <= totalLen1; pos1 += sampleStep) {
    const p1 = path1.getPointAtLength(pos1);
    for (let pos2 = 0; pos2 <= totalLen2; pos2 += sampleStep) {
      const p2 = path2.getPointAtLength(pos2);
      const currentDist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
      if (currentDist < minDist) {
        minDist = currentDist;
        bestPos1 = pos1;
        bestPos2 = pos2;
      }
    }
  }

  // 二分迭代收敛到指定精度
  let searchStep = sampleStep;
  while (searchStep > precision) {
    searchStep /= 2;
    // 遍历当前最优点的邻域位置
    const pos1Candidates = [bestPos1 - searchStep, bestPos1, bestPos1 + searchStep]
      .filter(pos => pos >= 0 && pos <= totalLen1);
    const pos2Candidates = [bestPos2 - searchStep, bestPos2, bestPos2 + searchStep]
      .filter(pos => pos >= 0 && pos <= totalLen2);
    
    for (const pos1 of pos1Candidates) {
      const p1 = path1.getPointAtLength(pos1);
      for (const pos2 of pos2Candidates) {
        const p2 = path2.getPointAtLength(pos2);
        const currentDist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
        if (currentDist < minDist) {
          minDist = currentDist;
          bestPos1 = pos1;
          bestPos2 = pos2;
        }
      }
    }
  }

  const point1 = path1.getPointAtLength(bestPos1);
  const point2 = path2.getPointAtLength(bestPos2);
  return {
    distance: minDist,
    pointOnPath1: { x: point1.x, y: point1.y },
    pointOnPath2: { x: point2.x, y: point2.y },
    // 从path1指向path2的方向向量
    vector: { x: point2.x - point1.x, y: point2.y - point1.y },
    // 向量方向角度，单位弧度
    angle: Math.atan2(point2.y - point1.y, point2.x - point1.x)
  };
}

// 调用示例
const path1 = document.getElementById('path1');
const path2 = document.getElementById('path2');
const shortestLine = document.getElementById('shortestLine');
const result = getPathMinDistance(path1, path2);

// 渲染最短距离指示红线
shortestLine.setAttribute('d', 
  `M${result.pointOnPath1.x},${result.pointOnPath1.y} L${result.pointOnPath2.x},${result.pointOnPath2.y}`
);

• 上述方案为通用实现，兼容所有类型的SVG路径，实现成本低，常规业务场景下性能完全足够。如果需要处理超复杂长路径、或者要求极高精度，可以在粗采样定位到具体曲线段后，替换为对应曲线的几何解析公式计算精确最短距离。
• 如果路径上配置了transform变形属性，需要将getPointAtLength获取到的本地坐标通过路径的getCTM()矩阵做坐标转换，得到页面实际渲染坐标后再计算距离，避免结果偏差。

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