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?
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.
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.
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.
来源：https://stackoverflow.com/questions/12633444/boolean-operations-on-a-svg-pathstring