如何用JavaScript实现Illustrator中SVG的Pathfinder Divide功能？

一、文本转路径（扩展文本） #

• 动态生成的文本可直接用Paper.js的PointText对象转路径，API完全匹配矢量编辑逻辑：

// Paper.js 文本转路径示例
const text = new paper.PointText({
  point: [50, 50],
  content: '目标文本内容',
  fillColor: '#000',
  fontSize: 24
});
const textPath = text.convertToPath();
// 删除原文本节点，保留路径对象
text.remove();

• 加载现有SVG时，可遍历所有<text>节点，用Paper.js加载后统一执行转路径操作，确保所有文本都转为可编辑路径。

二、描边转轮廓（扩展描边） #

• Paper.js的Path.offset()方法可实现描边转轮廓，原理是生成原路径的内外偏移路径并合并：

// Paper.js 描边转轮廓示例
const path = new paper.Path('M100,100L200,200');
path.strokeWidth = 10;
path.strokeColor = '#f00';
// 生成描边对应的闭合轮廓
const strokeOutline = path.offset(path.strokeWidth / 2).subtract(path.offset(-path.strokeWidth / 2));
path.remove();

• SVGO的convertShapeToPath插件仅负责基础形状转路径，不支持描边转轮廓，这一步优先用Paper.js。

三、路径分割扁平化（模拟Pathfinder Divide） #

• Paper.js的Path.divide()方法可直接实现重叠路径分割，对应Illustrator的Pathfinder Divide功能：

// Paper.js 多路径分割示例
const rectPath = new paper.Path.Rectangle([50, 50], [100, 100]);
const circlePath = new paper.Path.Circle([100, 100], 50);
// 分割重叠路径得到独立闭合路径
const dividedPaths = rectPath.divide(circlePath);
rectPath.remove();
circlePath.remove();

• 批量处理多路径时，可遍历路径集合两两执行分割，或用CompoundPath整合复杂路径后统一处理。

四、SVGO优化最终SVG #

• 完成核心编辑后，用SVGO在浏览器端压缩优化SVG，清理冗余代码：

// 浏览器端SVGO优化示例
import { optimize } from 'svgo';

// 从Paper.js导出SVG字符串
const rawSvg = project.exportSVG({ asString: true });
// 自定义插件规则优化
const optimizedSvg = optimize(rawSvg, {
  plugins: [
    'removeEmptyAttrs',
    'cleanupIDs',
    'mergePaths'
  ]
}).data;

五、方案总结 #

• 核心流程（文本转路径、描边转轮廓、路径分割）优先用Paper.js，无需重复实现矢量编辑逻辑；
• 最终SVG优化用SVGO处理压缩，两者配合可完整复现你的Illustrator工作流。

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