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

Question

我遇到了一个概念上难以解决的问题。

简而言之，我需要找到通过不同布尔运算组合的两个矢量路径的矢量路径。如联盟，差异，交叉点和减法。如果我能做到类似于Canvas如何进行globalCompositeOperation，那将是很好的。

我将如何在世界上这样做？

Answer 1

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

该库名为JavaScript Clipper，它是Angus Johnson's Clipper的端口（用Delphi，C ++，C＃和Python编写），后者又基于Bala R. Vatti's clipping algorithm.它能够处理所有多边形情况，包括自相交的情况。该库有许多额外的功能，包括所有布尔操作和节点闪电算法，以减少节点数。

Answer 2

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

Answer 3

globalCompositeOperation的等价物是SVG中的feComposite过滤器。这里的an example看起来类似于在Opera中使用的this in canvas。