-1

The project I'm working on involves parsing an SVG, extracting path coordinates, converting them to Well-Known Text and then into GeoJSON to be added to a Google Maps API data layer.

This all works fine until a path has one or more holes in it. In this case, I'm dealing with a single compound path describing a multitude of interconnected roads. I'm using SVG-to-WKT to generate the WKT, and its path function states that if a path has holes in it the returned primitive is translated into the subtracted-polygon syntax, with coordinate arrays for the holes following the coordinate array for the outline. This polygon appears to convert to GeoJSON properly (using Terraformer), resulting in an array of arrays of coordinates. The pixel coordinates resulting from this conversion are then translated to map coordinates.

However when the GeoJSON is added to the data layer, the coordinates for the holes becomes distorted and appear to the top left of their intended position with some polygons stretching between the two points.

This is just a small excerpt of the result (does not show stretching): http://bl.ocks.org/d/4ace4c9c25e02ad658be21c92187b336

If you zoom out you will notice the small rectangle that should be cutting a hole at the bottom of the road.

Below is a screenshot of how the roads group exists in the SVG, with the single compound path selected:

enter image description here

And this is how the whole group of road paths is being rendered:

enter image description here

I'm really not sure what else to try. I thought perhaps it was because the coordinates for the holes weren't in a clockwise direction, so I added a function to check and reverse the array if necessary and it didn't change anything. I am initially running the SVG through SVGOMG, but mostly just to convert the primitives back to paths.

Bobe
  • 2,040
  • 8
  • 29
  • 49

1 Answers1

0

The issue turned out to be quite trivial, but it took a while to realise. I reduced the SVG down to one path and studied the coordinate data closely. I noticed that the holes were being added as relative paths rather than absolute. This is normal for SVGs, but the WKT converter will assume that every path is absolute.

I simply added the Snap library and passed each path through the toAbsolute() function.

Bobe
  • 2,040
  • 8
  • 29
  • 49