SVG - 創建不同合併路徑的外部筆畫

Question

我有一個SVG文件，它代表使用不同路徑的地圖。

https://imgur.com/a/YyTyz

這些路徑表示不同的區域;我需要大膽創建這些路徑創建的外部筆劃，如圖所示（請注意，在單個文件中有2個SVG）。

https://imgur.com/a/0fepe

是否有可能實現thisin一個簡單的方法？

感謝諮詢

Answer 1

假設每個地圖的區域是自己的道路 - 那你還沒有在周圍之外的路徑，那麼最簡單的解決方法是：

1. 複製地圖
2. 把它放在後面
3. 給地圖的路徑較厚的行程

例如，我們從下面的簡化示例開始。

<svg width="400" height="200"> 
 
    <rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/> 
 
    <rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/> 
 
    <rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/> 
 
    <rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/> 
 
</svg>

如果我們把這些元素的副本，並給它一個較厚的行程，我們得到：

<svg width="400" height="200"> 
 
    <g fill="linen" stroke="black" stroke-width="5"> 
 
    <rect x="50" y="50" width="200" height="50"/> 
 
    <rect x="250" y="50" width="100" height="50"/> 
 
    <rect x="50" y="100" width="150" height="50"/> 
 
    <rect x="200" y="100" width="150" height="50"/> 
 
    </g> 
 
    <rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/> 
 
    <rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/> 
 
    <rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/> 
 
    <rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/> 
 
</svg>

保持文件小盡可能地，我們可以重複使用這兩個地圖副本的路徑：

<svg width="400" height="200"> 
 
    <defs> 
 
    <g id="map"> 
 
     <rect x="50" y="50" width="200" height="50"/> 
 
     <rect x="250" y="50" width="100" height="50"/> 
 
     <rect x="50" y="100" width="150" height="50"/> 
 
     <rect x="200" y="100" width="150" height="50"/> 
 
    </g> 
 
    </defs> 
 

 
    <use xlink:href="#map" fill="linen" stroke="black" stroke-width="5"/> 
 
    <use xlink:href="#map" fill="linen" stroke="black"/> 
 
</svg>

這並不一定是最優雅的解決方案，因爲所有的地圖元素拿得出的兩倍。但這是最簡單的解決方案。