重叠线虚线/虚线笔画在SVG相邻路径(Overlapping Dashed / Dotted Str

我建立地图共享边框几个县。每个县是它自己的封闭路径，因此相邻县市的边界堆叠在彼此。

我想给每个县虚线中风。但是，在应用时，交叉边界很难看作为每个县重叠虚线边界，产生不均匀的破折号外观。

我的用户将通过县境内鼠标放在该区域，因此（我相信），因此有必要为每个县一个封闭的路径选择县。

解决方案？

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

当然，你可以玩的图案瓷砖的大小和对角线的厚度，但我发现，线必须比图案瓷砖不再为他们顺利地重叠。