javascript - SVG 路径字符串上的布尔运算

Question

我遇到了一个概念上困难的问题。

简而言之，我需要通过不同的布尔运算找到两个向量路径组合的向量路径。例如并集、差集、交集和减法。如果我能像 Canvas 的 globalCompositeOperation 那样做，那就太好了。

我到底该怎么做呢？

Answer 1

有一个 JavaScript 库允许在路径是多边形的情况下对 SVG 路径进行布尔运算。使用足够高的采样，贝塞尔曲线可以多边形化到如此高的质量，以至于视觉结果几乎与真实曲线相同。

该库称为JavaScript Clipper，它是Angus Johnson 的 Clipper（用 Delphi、C++、C# 和 Python 编写）的一个端口，而后者又基于Bala R. Vatti 的裁剪算法。它能够处理所有多边形情况，包括自相交的情况。该库有许多额外的功能，包括所有布尔运算和用于减少节点数的节点减轻算法。

Answer 2

如果您需要创建由许多其他形状相交、联合等组成的新几何形状，您要么必须自己在脚本中处理它，要么使用矢量图形编辑器（Inkscape 和 Illustrator 都提供此功能）来为你做这个。

Answer 3

globalCompositeOperation 的等价物是 SVG 中的 feComposite 过滤器。这是一个在 Opera 中工作的画布中看起来与此类似的示例。