使用PSD.js转Photoshop路径为SVG时，如何获取各路径运算类型？

我正在尝试使用PSD.js将Photoshop路径转换为SVG。通过PSD.js可获取图层的蒙版数据，进而提取形状图层的路径数据，该数据为JavaScript数组，符合Photoshop文件格式规范。对于无孔洞的简单形状，转换为SVG路径字符串并渲染的流程正常。

但Photoshop允许将多个路径组合为一个形状，且每个路径可指定以下运算类型：

• Unite - 合并路径
• Subtract - 路径相减（创建孔洞）
• Exclude - 移除两路径重叠区域并保留其余部分
• Intersect - 仅保留两路径重叠区域

这类带运算的路径产生的孔洞无法仅通过SVG缠绕规则（non-zero或even-odd）处理：例如Subtract运算无论路径方向如何都会创建孔洞，而SVG仅当孔洞路径与外部路径方向相反时才会识别为孔洞；Unite运算也不受SVG缠绕规则影响。我希望提取各路径的运算类型，以此构建无需依赖SVG缠绕规则即可正确渲染孔洞的路径。现询问：是否可通过PSD.js获取形状中每个路径的运算类型？

我曾尝试用SVG缠绕规则绘制孔洞，但因孔洞路径与外部路径方向相同，未被识别为孔洞（在Photoshop中显示为孔洞，但SVG渲染时没有孔洞效果）。

可以通过PSD.js获取形状中每个路径的运算类型。

在PSD.js解析后的形状图层蒙版数据里，每个路径对象会包含对应运算类型的属性，该属性对应Photoshop文件格式中定义的路径运算标记。你可以在遍历路径数据时，查看路径项的operation或类似命名的字段（具体可查看PSD.js的源码或调试解析后的数据结构），其值会对应Unite、Subtract、Exclude、Intersect这几种运算类型。

拿到运算类型后，你可以针对性处理SVG路径：

• 针对Subtract类型的路径，主动反转其路径方向，让SVG的缠绕规则能正确识别为孔洞；
• 针对Unite类型的路径，直接合并原有路径即可；
• 针对Exclude和Intersect类型，可以通过组合路径方向，或者配合SVG的<clipPath>、<mask>元素来实现对应的形状组合效果，从而精准还原Photoshop中的原始形状逻辑。

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