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

【问题标题】：SVG - get the difference path of two pathsSVG - 获取两条路径的差异路径
【发布时间】：2013-10-14 12:02:19
【问题描述】：

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

最好是 JavaScript，但 C# 也可以。

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

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

【问题讨论】：

标签： c# javascript svg

【解决方案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）。还有一个多边形资源管理器，您可以在其中查看操作结果。也可以将输出视为 SVG 路径。还有A WIKI PAGE，里面有代码示例。

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

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

【讨论】：

我正在寻找的是 B) 布尔差异。 Clipper 看起来很有希望，谢谢。
以下是您可能需要的一些信息：扁平化变换 (stackoverflow.com/a/13102801/1691517) 和多边形化路径 (stackoverflow.com/questions/15247711/…)。我已经制作了一个开箱即用的解决方案，它结合了所有需要的东西，但它是一个相当复杂的解决方案。几周前出现了一个新的更好的解决方案，我正在研究其中。
此解决方案确实有效，但并非在所有情况下都有效（我不知道为什么）。如果您将属性 fill-rule="evenodd" 添加到它开始表现一致的路径（也就是它的工作原理）。