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

我正在渲染SVG路径的映射（使用）

在某些情况下，一个区域必须与相邻区域合并

不幸的是，这两个区域彼此不接触，我必须进行插值以填充其间的空间

jVectormap使用非常简单的SVG路径和

M

设置绝对起始点，并

l

连接相对点

---

SVG库中是否包含此类操作？

这可能不是您想要的答案，但使用Raphael.js，您可以在一个区域的整个路径上循环，并将其与第二个区域的所有点进行比较。如果坐标与第二个区域上的任何坐标的距离小于

n

像素，而之前的坐标不是，则可以将其视为“粘合”点。然后跳到第二个区域并开始在其上循环，如果下一个点仍然比

n

点更近，则向相反方向移动，如果更近，则更改方向并沿路径移动更远，直到找到一个距离原始区域比

n

像素更远的点。继续沿该方向循环，直到再次找到一个新的“粘合”点，在该点上，您将以所述方式再次切换到原始区域，并且可以丢弃此最终循环中未覆盖的所有点（或者，您可以简单地根据在原始区域长度上循环时遇到的点创建一个新形状

---

诚然，这不是最容易编写的脚本，但我相信它应该是非常有能力的，特别是当您可以使用

getPointAtLength

之类的函数来查找定义的svg点之间的点时（虽然您只需要“记录”定义的点，这是一条艰难的道路，因为Raphael.js没有任何功能可以帮助您实现这一点，但即使手动匹配也不太困难（当然是在代码中）。

我没有尝试过这一点，但您可以通过使用以下参数来绕过它：

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

其中，

region_1

和

region_2

是需要合并的两个区域

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