5

Is there an easy way to get the difference path of two SVG paths? I have a large polygon where I need to cut some holes from or which I have to cut into pieces by subtracting a path.

Preferably something in JavaScript, but C# would also work.

I've already searched for solutions. The closest is How can I cut one shape from another, but it is about shapes, not paths. And this answer gives just a clue how to draw a path with holes but no way to automate this.

Am I really stuck with manually adding the second path (including all the stuff like checking the direction, absolute/relative position, transforms etc)?

Community
  • 1
  • 1
Dehalion
  • 757
  • 1
  • 7
  • 16

1 Answers1

7

I'm not very sure, what you want to achieve, but I can see two possibilities: A) draw a polygon with holes or B) make boolean difference operation between two polygons.

A) DRAW POLYGON WITH HOLES

The winding order is the key. If you have outer polygon (SVG path), which is clockwise (CW) like this:

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67Z"

and a hole polygon (SVG path) which is counter-clockwise (CCW), like this: "M274.37,190.77 L171.24,190.77 L171.24,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z"

And you combine these into same path:

"M155,61.67 L155,212.7 L288.98,212.7 L288.98,61.67 L173.01999999999998,61.67 L155,61.67ZM274.37,190.77 L171.24,190.77 L171.24,81.16 L274.37,81.16 L274.37,81.16 L274.37,190.77Z"

you get the following polygon with hole:

enter image description here

In the above image it seems that inner polygon is subtracted from the outer polygon.

B) MAKE BOOLEAN DIFFERENCE OPERATION BETWEEN TWO POLYGONS

If you want to cut one polygon from other polygon and want to create a new geometry by making a boolean difference operation between two or more polygons, you can use JAVASCRIPT CLIPPER, which has AN ONLINE DEMO, where you can play with different boolean operations. You can also input your own polygons by clicking Polygons - Custom. You can input them using SVG path syntax (only MoveTo:s and LineTo:s are permitted). There is also a Polygon Explorer, where you can see the result of operations. Also outputs can be seen as SVG paths. There is also A WIKI PAGE, which has code examples.

An example of Subject ("polygon") and Clip ("clipping") polygons: enter image description here

Boolean Difference between Subject and Clip polygons: enter image description here

Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
  • what I was looking for was B) boolean difference. clipper looks promising, thanks. – Dehalion Oct 15 '13 at 14:27
  • 1
    Here is some information that you may need: flattening transformations (http://stackoverflow.com/a/13102801/1691517) and polygonizing paths ( http://stackoverflow.com/questions/15247711/convert-an-svg-path-to-polygons-for-use-within-javascript-clipper). I have made an out-of-the-box solution that combines all that is needed, but it's rather complicated solution. Few weeks ago there appeared a new better solution, in which I'm working on. – Timo Kähkönen Oct 16 '13 at 11:45
  • This solution **does** work, although not in every case (I'm not sure why). If you add the attribute `fill-rule="evenodd"` to the path it starts behaving consistently (aka it works). – tfrascaroli Jun 30 '15 at 07:26