SVG中相鄰路徑上的重疊/虛線筆畫

我正在構建幾個共享邊界的縣的地圖。每個縣都是自己封閉的路徑，因此相鄰縣的邊界相互堆疊在一起。SVG中相鄰路徑上的重疊/虛線筆畫

我想給每個縣打破一筆。然而，在應用時，相互交叉的邊界看起來很醜，因爲每個縣的虛線邊界重疊，造成不均勻的衝刺外觀。

我的用戶將通過在縣邊界內的區域內選擇縣，因此（我相信）有必要爲每個縣創建封閉的路徑。

解決方案？

2014-02-26 CaitlinW

最後一個選擇，這可能是簡單的或極其複雜的取決於你的地圖數據是如何格式化的，將提請但不是中風了縣固體形狀，然後分別繪製邊框作爲個人（開放）路徑沒有重複。 – AmeliaBR

@AmeliaBR你有建議如何做到這一點？我相信所涉及的步驟是： 1）將多邊形轉換爲路徑和2）刪除重複的路徑段。我有大約80個相鄰的多邊形，每個多邊形與1到5個其他多邊形共享邊界，所以手動執行這個操作似乎是不可行的。 – CaitlinW

您可以使用[topoJSON]（https://github.com/mbostock/topojson/wiki）庫在您的數據文件中進行轉換。這就是我所指的「它*可能很簡單」的評論 - 即，*如果*你已經在使用topoJSON。我自己沒有太多經驗，但有很多例子使用它和d3映射庫。 – AmeliaBR

我最終解決這個問題的方式與任何建議不同。我發佈了another, more specific question here。（看我的回答）

一旦我完成了我在其他問題中概述的步驟，我將shapefile轉換回geojson並將其加載到我的地圖中。我沒有刪除包含整個多邊形的geojson，只是簡單地關閉了該圖層上的邊框樣式。然後，我將相同的圖層樣式應用於溶解的幾何圖形，這次是用一個虛線的筆畫。

Image of result here.

來源

2014-04-11 19:53:54 CaitlinW

是的，封閉的路徑是必需的。但是，虛線筆劃總是不均勻，因爲虛線陣與路徑長度有關，這對於每個路徑都是不同的。對於每條路徑，最好是放下筆畫或使其保持相同的寬度，沒有短劃線。我曾經用鼠標懸停的策略是減少mouseover上的不透明度，然後在鼠標移出時將其返回1.00。

來源

2014-02-26 18:24:26

如果對筆劃使用<pattern>，則可以基於整體座標系定義該模式，而不是基於任何一種形狀的尺寸。所以不同形狀的圖案將完美排列。

缺點是圖案不會與線的方向對齊：無論線是垂直，水平還是彎曲，圖案都將保持不變。就好像你有一張圖案大小的圖案壁紙，並沿着你的形狀的輪廓切出一條。因此，訣竅是弄清楚一個看起來不錯的模式，不管線條如何穿過它。

參見例如：http://fiddle.jshell.net/LYue4/2/

基本看是使用重疊破折號數組屬性的結果。懸停在圖像上，它將切換爲棋盤圖案;如果將鼠標放在圖像上，它將切換到對角線模式。

兩者看起來都不錯，但不是很好，這取決於路徑線的角度。你必須在你的地圖上測試它，看看它是否有改進。

的模式代碼：

<defs> 
    <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="2" height="2"> 
     <rect width="1" height="1"/> 
     <rect width="1" height="1" x="1" y="1"/> 
    </pattern> 
    <pattern id="diagonals" patternUnits="userSpaceOnUse" width="2" height="2"> 
     <line x1="-1" y1="0" x2="2" y2="3" /> 
     <line x1="0" y1="-1" x2="3" y2="2" /> 
    </pattern> 
</defs>

CSS：

svg path{ 
    fill:lightblue; 
    stroke: black; 
    stroke-dasharray: 2 2; 
} 
svg:hover path{ 
    stroke: url(#checkerboard); 
    stroke-dasharray: none; 
} 
svg:active path{ 
    stroke: url(#diagonals); 
    stroke-dasharray: none; 
} 
pattern line { 
    stroke-width:0.8; 
    stroke:black; 
}

當然，你可以玩的圖案瓷磚的大小和對角線的厚度，但我發現，線條必須比圖案平鋪更長才能平滑重疊。

來源

2014-02-26 20:42:55 AmeliaBR

SVG中相鄰路徑上的重疊/虛線筆畫

回答

相關問題