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

是的,需要封闭路径。然而,虚线笔划总是不均匀的,因为虚线阵列与路径长度有关,而路径长度对于每个路径都不同。对于每一条路径,最好是放下笔画,或者保持相同的宽度,没有破折号。我用来显示鼠标悬停的一个策略是减少鼠标悬停时的不透明度,然后在鼠标悬停时将其返回到1.00。

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

当然,您可以随意调整图案平铺的大小和对角线的厚度,但我发现这些线必须比图案平铺长,才能平滑重叠。

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

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

Image of result here.