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

Question

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

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

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

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 并没有任何功能可以帮助解决这个问题，即使这样也不应该太难用 hand（当然是在代码中））。