Question

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

我想给每个县一个中风。但是，应用时，交叉边框看起来很丑，因为每个县的虚线边框重叠，从而产生不均匀的短划线外观。

我的用户将通过鼠标覆盖县境内的区域来选择县，因此（我相信）需要为每个县创建一个封闭的路径。

解决方案？

Answer 1

是的，封闭的路径是必需的。但是，虚线笔划将始终不均匀，因为短划线阵列与路径长度相关，这对于每条路径都是不同的。对于每条路径，最好是放下笔划或使其保持相同的宽度，不带破折号。我用来显示鼠标的策略是降低鼠标悬停时的不透明度，然后在鼠标移出时将其恢复为1.00。

Answer 2

如果对笔划使用<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;
}

当然，您可以使用图案拼贴的大小和对角线的粗细来进行游戏，但我发现这些线条必须比图案拼贴更长才能平滑地重叠。

Answer 3

我最终以不同于任何建议的方式解决这个问题。我发布了another, more specific question here。（见我的回答）

一旦我完成了另一个问题中概述的步骤，我将shapefile转换回geojson并将其加载到我的地图中。我没有删除包含整个多边形的geojson，只是关闭了该图层上的边框样式。然后我将相同的图案样式应用于溶解的geojson，这次使用虚线笔划。

Image of result here.

在SVG中相邻路径上重叠虚线或点状笔划

3 个答案: