Merge two svg path elements programmatically

Question

I am rendering a map out of SVG paths (using jVectormap).

There are cases where one region has to be merged with the neighboring region.

Unfortunately both regions don't touch each other and I have to interpolate to fill the space in between.

jVectormap uses very simple SVG paths with M to set the the absolute startpoint and l to connect relative points.

Does any of the SVG libraries cover such an operation?

Answer 1

This might not be the kind of answer you're looking for, but using Raphael.js you could loop over the entire length of the path of one region getPointAtLength(), comparing it with all points of the second region. If the coordinates are closer than n pixels from any coordinates on the second region and the previous coordinates weren't, than that could be regarded a "glue" point. You would then jump to the second regio and start looping over it, if the next point is still closer than n points, than go in the opposite direction, if still closer change direction and go farther along the path till finding a point that's farther away from the original region than n pixels. Continue looping in that direction till once again finding a new "glue" point, where once again you will switch to the original region in the manner described and all points which weren't covered in this final loop could be discarded (or you could simply create a new shape based on the points you came across whilst looping over the length of the original region.

True enough, it's not the easiest script to make, but it should be quite do-able I believe, especially when you can use a function like getPointAtLength to find the points between the defined svg points (though you need to only 'record' the defined points, and that's sort of the hard path as Raphael.js doesn't excitedly have any functions which would help with this, still even that shouldn't be too hard to match up by hand (in code of course)).

Answer 2

I haven't tried this, but you may get around it by running the converter at jVectormap with the following parameters:

--buffer_distance=0
--where="ISO='region_1' OR ISO='region_2'"

Where region_1 and region_2 are the two regions that you need to merge.

Solving the problem this way also means that the generated SVG paths are true to the original coordinates, whereas a following fix may lead to some (probably minor) inconsistencies.