在SVG中的相邻路径上重叠虚线/虚线笔划

Question

我正在构建一个共享边界的几个县的地图。每个县都是自己的封闭路径，因此相邻县的边界彼此堆叠。

我想给每个县都有虚线的中风。然而，当应用时，交叉边界看起来丑陋，因为每个县的虚线边界重叠，创造了一个不均匀的冲击外观。

我的用户将通过致力于在县域边界内的区域进行选择县，因此（我相信）有必要为每个县创建一个封闭的路径。

解决方案？

Answer 1

我最终解决了这些不同于任何建议。我发布了更多，更多这里的具体问题。（见我的答案）

一旦完成了我在另一个问题中概述的步骤，我将shapefile转换回geojson并将其加载到我的地图中。我没有删除包含整个多边形的地质json，但只需关闭该图层上的边框样式。然后我将与溶解的地理司司相同的层面施加到溶解的地理镜上，并用虚线笔划。

结果在这里。

Answer 2

是，需要封闭的路径。但是，虚线笔划将始终是不均匀的，因为Dash阵列与路径长度有关，这将为每个路径进行脱节。对于每条路径，最好丢弃行程或者它保持不变，没有破折号。我曾经播放过鼠标的策略是为了减少鼠标悬停的不透明度，然后在鼠标上返回1.00。

Answer 3

如果使用a <pattern>

缺点是模式不会与线的方向对齐：模式将保持相同线是否垂直，水平或弯曲。就好像你有一张图案壁纸的图形尺寸，并沿着你的形状轮廓切出了一条带。因此，诀窍是弄清楚一个看起来很好的模式，无论线如何划过它。

参见示例： http://fiddle.jshell.net/lyue4/2/

基本外观是使用重叠的DASH数组属性的结果。悬停在图像上，它将切换到棋盘图案;如果将鼠标置于图像上，它将切换到对角线图案。

两个看起来好，但不是很大，取决于路径线的角度。你必须在地图上测试它，看看它是否是一个改进或没有。

模式的代码：

<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;
}

.

你当然可以用图案瓦片的大小和对角线的厚度播放，但我发现线路必须长于图案瓦片，为它们平滑重叠。