CODEWITHSUNDEEP
javascriptsvgraphaelcomputational-geometryvector-graphics
Ryan Allred
Ryan Allred

Reputation: 414

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 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?

Upvotes: 5

Views: 3785

Answers (3)

nicholaswmin
nicholaswmin

Reputation: 22989

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.

Upvotes: 3

Erik Dahlström
Erik Dahlström

Reputation: 61006

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.

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124219

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.

Upvotes: 0

Related Questions