以編程方式合併兩個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路徑與原始座標一致，而後續修復可能會導致一些（可能較小）的不一致。