Boolean Operations On A Svg Pathstring

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 Di

Solution 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.

Solution 2:

If you need to create new geometric shapes that consist of a number of other shapes intersected, unioned and so on you'll either have to handle it yourself in script, or use a vector graphics editor (Inkscape and Illustrator both offer this functionality) to do this for you.

Solution 3:

The equivalent of globalCompositeOperation is the feComposite filter in SVG. Here's an example that looks similar to this in canvas which works in Opera.