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

Question

有没有一种简单的方法来获取两个 SVG 路径的差异路径？我有一个大多边形，我需要从中切出一些孔，或者必须通过减去路径将其切成碎片。

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

我已经在寻找解决方案。最接近的是How can I cut an shape from another，但它是关于形状，而不是路径。这个答案只是提供了一个线索，如何绘制带孔的路径，但无法自动执行此操作。

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

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，它有一个在线演示，您可以在其中玩不同的布尔运算。您也可以通过单击多边形 - 自定义来输入您自己的多边形。您可以使用 SVG 路径语法输入它们（仅允许 MoveTo:s 和 LineTo:s）。还有一个多边形资源管理器，您可以在其中查看操作结果。也可以将输出视为 SVG 路径。还有一个 WIKI PAGE，其中包含代码示例。

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

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