Skip to main content
1 of 2
Phrogz
  • 195
  • 1
  • 6

Determining the 'outer' subpath in a compound SVG path

The following four SVG paths render the same (using the default fill-rule="nonzero"):

<path id="cwOccwI" d="M0,0 10,0 10,10zM5,2 8,5 8,2z" transform="translate( 0,0)"/>
<path id="ccwOcwI" d="M0,0 10,10 10,0zM5,2 8,2 8,5z" transform="translate(15,0)"/>
<path id="ccwIcwO" d="M5,2 8,5 8,2zM0,0 10,0 10,10z" transform="translate(30,0)"/>
<path id="cwIccwO" d="M5,2 8,2 8,5zM0,0 10,10 10,0z" transform="translate(45,0)"/>

Four triangles with triangular holes inside

As hinted at by the IDs, these are combinations of clockwise (cw) and counter-clockwise (ccw) orientations for the outer (O) and inner (I) subpaths, varying the order the subpaths are added.

I'm converting SVG paths to GeoJSON. It requires a single 'positive' subpath that is oriented counter-clockwise, and any/all 'hole' subpaths to be oriented clockwise.

Given an SVG path with subpaths (which I can assume/guarantee will not overlap), how can I determine which subpath(s) are 'positive' paths, and which are 'holes'? As shown above, I cannot rely on the orientation of the points within the path, and I cannot rely on the ordering of sub-paths.

Phrogz
  • 195
  • 1
  • 6