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

Question

我正在使用SVG路径渲染地图(使用jVectormap).

在某些情况下,必须将一个区域与邻近区域合并.

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

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

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

Answer 1

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

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