Boolean operations on a SVG pathstring

Question

I've come to a conceptually difficult problem.

In short, I need to find the vector path of two vector paths combined through different boolean operations. Such as the Union, the Difference, the Intersection, and Subtraction. It would be nice if I could do it similar to how Canvas does it's globalCompositeOperation.

How in the world would I go about doing this?

Answer 1

There is a JavaScript library that allows for boolean operations on SVG paths under the condition that the path is a polygon. Using a high enough sampling, the beziers can be polygonized to such a high quality that the visual result is almost identical to a true curve.

The library is called JavaScript Clipper and it is a port of Angus Johnson's Clipper (written in Delphi, C++, C# and Python), which in turn is based on Bala R. Vatti's clipping algorithm. It is able to handle all polygon cases, including the self-intersecting ones. The library has many extra functions, including all of the boolean operations and a node lightening algorithm for reducing the node count.