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

Question

我正在使用jVectormap将SVG路径渲染成地图。

有些情况下，一个地区必须与相邻的地区合并。

不幸的是，这两个地区并没有直接接触，而我需要插值填充它们之间的空白部分。

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

是否有任何SVG库可以覆盖这种操作？

- jantimon

Answer 1

我没有试过这个方法，但您可以通过在jVectormap的转换器上使用以下参数来绕过此问题：

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

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

用这种方法解决问题还意味着生成的SVG路径与原始坐标是一致的，而后续修复可能会导致一些（可能很小的）不一致性。

- mzedeler

Answer 2

这可能不是你想要的答案，但使用Raphael.js，您可以循环遍历一个区域路径的整个长度getPointAtLength()，将其与第二个区域的所有点进行比较。如果坐标比第二个区域上任何坐标更接近n像素，并且之前的坐标不是，则可以视为“粘合”点。然后，您将跳转到第二个区域并开始循环遍历它，如果下一个点仍然比n个点更接近，则向相反方向前进，如果仍然更接近，则改变方向并沿着路径向前走，直到找到一个点，该点距离原始区域的距离大于n像素。在该方向上继续循环，直到再次找到新的“粘合”点，在那里您将按照所述方式切换到原始区域，并且在此最终循环中未覆盖的所有点都可以被丢弃（或者您可以根据在循环原始区域的长度时遇到的点创建一个新形状。

确实，这不是最容易的脚本，但我相信这是可以做到的，特别是当你可以使用像getPointAtLength这样的函数来找到在定义的svg点之间的点时（尽管你只需要“记录”定义的点，这是相对困难的部分，因为Raphael.js并没有任何有助于此的函数，但即使如此，通过代码手动匹配也不应该太困难）。

- David Mulder