JavaScript中如何比较两个闭合SVG路径的相似度？

不用栅格化像素，直接通过矢量几何运算就能高效解决问题，以下是具体方案：

优先方案：基于矢量库的精确计算 #

推荐用专门的2D路径处理库，避免自己造轮子，这类库原生支持M/C/Q/Z命令解析、布尔运算和面积计算，精度高且效率好。

常用库选择 #

• Paper.js：功能全面，API友好，支持路径布尔运算、面积计算、路径简化等，适合复杂场景
• Flatten.js：轻量专注，核心就是2D路径的布尔运算与几何分析，打包体积小

实现示例（以Paper.js为例） #

1. 路径解析与初始化

先把SVG路径字符串转成库的路径对象，不用渲染到页面也能计算：

// 你的两个闭合路径字符串
const pathStrA = "M10,10 Q50,100 90,10 Z";
const pathStrB = "M20,20 C30,50 70,50 80,20 Z";

// 初始化离屏Paper项目（无需页面画布）
paper.setup(new paper.Size(0, 0));

// 转换为可操作的Path对象
const pathA = new paper.Path(pathStrA);
const pathB = new paper.Path(pathStrB);

2. 获取路径面积

直接通过area属性获取闭合路径的面积（注意：如果路径方向不一致可能返回负数，取绝对值即可）：

const areaA = Math.abs(pathA.area);
const areaB = Math.abs(pathB.area);

3. 计算重叠比例

最直接的方式是计算两个路径的交集面积，再除以目标路径的面积得到比例：

// 计算交集路径
const intersectionPath = pathA.intersect(pathB);

// 累加交集的总面积（如果交集是多个独立路径）
let intersectionArea = 0;
if (intersectionPath.children) {
  intersectionPath.children.forEach(child => {
    intersectionArea += Math.abs(child.area);
  });
} else {
  intersectionArea = Math.abs(intersectionPath.area);
}

// 计算重叠比例：交集面积 / 路径A的面积（按需换成路径B的面积）
const overlapRatio = intersectionArea / areaA;

如果一定要用路径相减来计算，也可以：

// 路径A减去路径B，得到A中不重叠的部分
const subtractedPath = pathA.subtract(pathB);

let subtractedArea = 0;
if (subtractedPath.children) {
  subtractedPath.children.forEach(child => subtractedArea += Math.abs(child.area));
} else {
  subtractedArea = Math.abs(subtractedPath.area);
}

// 重叠比例 = (原面积 - 相减后面积) / 原面积
const overlapRatio = (areaA - subtractedArea) / areaA;

备选方案：栅格化像素对比 #

如果不想引入第三方库，可以用Canvas栅格化，但精度会受画布分辨率影响：

• 创建Canvas元素，设置足够大的尺寸保证精度
• 先绘制第一个路径，用destination-in合成模式绘制第二个路径，得到重叠区域
• 读取Canvas像素数据，统计非透明像素的数量，计算比例
• 缺点：边缘有锯齿，精度依赖画布大小，性能不如矢量方案

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