以编程方式合并两个svg路径元素

我正在使用SVG路径渲染地图(使用jVectormap )。

在某些情况下,必须将一个区域与邻近区域合并。

不幸的是,两个区域都没有相互接触,我必须进行插值以填充其间的空间。

将两个区域合并为一个

jVectormap使用非常简单的SVG路径,其中M设置绝对起点, l连接相对点。

是否有任何SVG库涵盖此类操作?

我没试过这个,但你可以通过在jVectormap上使用以下参数运行转换器来解决这个问题:

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

其中region_1region_2是您需要合并的两个区域。

以这种方式解决问题也意味着生成的SVG路径对原始坐标是真的,而后续修复可能导致一些(可能是次要的)不一致。

这可能不是您正在寻找的那种答案,但是使用Raphael.js可以循环遍历一个区域getPointAtLength()的路径的整个长度,将其与第二个区域的所有点进行比较。 如果坐标比第二区域上的任何坐标更接近n像素并且之前的坐标不是,则可以将其视为“胶水”点。 然后你会跳到第二个区域并开始循环,如果下一个点仍然比n点更接近,则向相反方向移动,如果仍然更接近改变方向并沿着路径走得更远,直到找到一个更远的点从原始区域比n像素。 继续沿着这个方向循环,直到再次找到一个新的“胶水”点,再一次你将以所描述的方式切换到原始区域,并且可以丢弃在最后一个循环中未覆盖的所有点(或者你可以简单地根据您遇到的点创建一个新形状,同时在原始区域的长度上循环。

确实,它不是最容易制作的剧本,但我相信它应该是非常可行的,特别是当你可以使用像getPointAtLength这样的函数来找到定义的svg点之间的点时(尽管你只需要’记录’由于Raphael.js并没有兴奋地拥有任何可以帮助解决这个问题的function,所以这也是一条艰难的道路,即使这样也不应该太难以手动匹配(当然在代码中))。