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中相邻路径上的重叠/虚线笔画

回答

相关问题