SVG - 获取两条路径的差异路径

Question

是否有一种简单的方法可以获得两条SVG路径的差异路径？我有一个大的多边形，我需要从中切出一些洞，或者我必须通过减去路径来切割成碎片。

最好是JavaScript中的东西，但C＃也可以。

我已经搜索了解决方案。最接近的是How can I cut one shape from another，但它是关于形状，而不是路径。并且this answer只给出了如何绘制带孔的路径的线索，但没有办法自动化。

我真的坚持手动添加第二条路径（包括检查方向，绝对/相对位置，变换等所有内容）？

Answer 1

我不太确定，你想要实现什么，但我可以看到两种可能性：A）绘制带孔的多边形或B）在两个多边形之间进行布尔差分运算。

A）用孔绘制多边形

绕线顺序是关键。如果你有外部多边形（SVG路径），顺时针（CW）像这样：

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67Z"

和逆时针（CCW）的孔多边形（SVG路径），如下所示： "M274.37,190.77 L171.24,190.77 L171.24,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z"

然后将这些组合成相同的路径：

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67ZM274.37,190.77 L171.24,190.77 L171.24,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z"

你得到以下带孔的多边形：

在上图中，似乎从外部多边形中减去了内部多边形。

B）在两个多边形之间进行布尔差异运算

如果要从其他多边形中剪切一个多边形，并希望通过在两个或多个多边形之间进行布尔差异操作来创建新几何图形，则可以使用JAVASCRIPT CLIPPER，其中AN ONLINE DEMO，其中你可以玩不同的布尔操作。您还可以通过单击“多边形 - 自定义”来输入自己的多边形。您可以使用SVG路径语法输入它们（仅允许MoveTo：s和LineTo：s）。还有一个Polygon Explorer，您可以在其中查看操作结果。输出也可以看作SVG路径。还有A WIKI PAGE，其中包含代码示例。

主题（“多边形”）和剪辑（“剪裁”）多边形的示例：

主题和剪辑多边形之间的布尔差异：