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

Question

我从SVG路径中绘制地图（使用jVectormap）。

有些情况下，一个区域必须与邻近区域合并。

不幸的是，两个区域都不会互相接触，我必须插入以填充两者之间的空间。

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

是否有任何SVG库覆盖这样的操作？

Answer 1

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

真的够了，它不是最简单的脚本，但它应该是相当可行的，我相信，尤其是当你可以使用像getPointAtLength这样的函数来找到定义的svg点之间的点（尽管你只需要'记录'定义的点，这就是困难的路径，因为Raphael.js并不兴奋地具有任何帮助这一点，即使这样也不应该太难匹配手（在code of co URSE））。

Answer 2

我还没有尝试过，但你可能会围绕它运行the converter at jVectormap以下参数：

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

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

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