如何获取两个SVG路径的交集路径？

嘿，我完全懂你的需求——你要的是完整的交集SVG路径数据，而不是仅仅一堆交点坐标，之前试的那几个库确实各有各的坑。这里给你两个经过验证的方案，分别适配浏览器和Node.js环境：

方案一：浏览器环境用 Paper.js #

Paper.js是专门处理矢量图形的老牌库，对路径布尔运算（交集、并集、差集这些）支持得非常扎实，而且能直接输出SVG路径字符串，完全符合你的要求。

具体步骤： #

1. 先引入Paper.js：你可以下载Paper.js的本地脚本文件引入，或者通过npm安装后打包到项目中

   <script src="./paper-full.min.js"></script>
   

2. 初始化一个隐藏的画布（只是用来做计算，不用显示出来）：

   // 创建隐藏画布
   const hiddenCanvas = document.createElement('canvas');
   hiddenCanvas.style.display = 'none';
   document.body.appendChild(hiddenCanvas);
   // 初始化Paper.js环境
   paper.setup(hiddenCanvas);
   

3. 把你的SVG路径转成Paper.js的Path对象：

   // 替换成你自己的实际路径数据
   const pathA = new paper.Path('M10 10 L90 10 L90 90 L10 90 Z');
   const pathB = new paper.Path('M40 40 L60 40 L60 60 L40 60 Z');
   

4. 执行交集运算，拿到结果路径：

   const intersectionResult = pathA.intersect(pathB);
   // 输出SVG路径字符串，直接就能用
   console.log(intersectionResult.pathData);
   

   注意：如果交集是多个分离的路径片段，intersectionResult会是一个PathItem集合，你可以遍历每个元素的pathData来获取所有片段。

方案二：Node.js环境用 Paper.js #

Paper.js也完美支持Node.js，不用换库，统一逻辑很方便：

步骤： #

1. 先安装依赖：

   npm install paper
   

2. 编写计算代码：

   const paper = require('paper');
   
   // 初始化Paper.js的虚拟画布
   paper.setup(new paper.Size(1000, 1000));
   
   // 定义你的两个SVG路径
   const pathA = new paper.Path('M10 10 L90 10 L90 90 L10 90 Z');
   const pathB = new paper.Path('M40 40 L60 40 L60 60 L40 60 Z');
   
   // 执行交集运算
   const intersection = pathA.intersect(pathB);
   
   // 输出结果路径数据
   console.log(intersection.pathData);
   

为啥你之前试的库不好用？ #

• svg-intersections：它的定位就是找交点，不做路径重构，所以只能拿到坐标，没法直接生成完整路径；
• path-intersection：对复杂路径（尤其是带贝塞尔曲线的）兼容性极差，经常返回空数组，实用性很低；
• Snap.svg：它的布尔运算API其实能返回路径，但文档写得太模糊，而且对很多复杂路径的处理容易出问题，稳定性不如Paper.js。

额外小提示 #

• 如果你的路径带有transform属性，可以先把变换应用到路径的每个点上（转成绝对坐标的路径）再运算，运算完你再自行移除变换就行；
• Paper.js支持所有SVG路径命令（M、L、C、Q这些全兼容），不管是简单矩形还是复杂曲线都能处理；
• 要是运算后得到的路径有多余的冗余点，可以用path.simplify()方法优化一下路径数据。

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