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

Question

我正在使用jVectormap）从SVG路径渲染地图。

有些地区必须与邻近地区合并。

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

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

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

Answer 1

我还没试过这个，但你可以通过使用以下参数运行the converter at jVectormap来解决这个问题：

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

region_1和region_2是您需要合并的两个区域。

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

Answer 2

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

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