Overlapping Dashed / Dotted Strokes on Adjacent Paths in SVG

Question

I'm building a map of several counties that share borders. Each county is it's own enclosed path, and therefore the borders of adjacent counties are stacked over one another.

I'd like to give each county a dashed stroke. However, when applied, the intersecting borders look ugly as the dashed borders of each county overlap, creating an uneven dash appearance.

My users will be selecting counties by mousing over the area within the county borders, thus (I believe) making it necessary to create an enclosed path for each county.

Solutions?

Answer 1

I ended up solving this differently than any of the suggestions. I posted another, more specific question here. (See my answer)

Once I completed the steps I outlined in the other question, I converted the shapefile back to geojson and loaded it into my map. I didn't remove the geojson that included the whole polygons, but simply turned off the border style on that layer. I then applied the same layer stylings to the dissolved geojson, and this time with a dashed stroke.

Image of result here.

Answer 2

Yes, the enclosed paths are required. However, dashed strokes will always be uneven because the dash-array is related to the path length, which will be defferent for each path. It would be best to either drop the stroke or have it remain the same width, without dash, for each path. A strategy that I have used to show mouse over, is to reduce the opacity on mouseover, then return it to 1.00 on mouse out.

Answer 3

If you use a <pattern> for the strokes, you can define the pattern based on the overall coordinate system, instead of based on the dimensions of any one shape. So the pattern for different shapes will line up perfectly.

The downside is that patterns won't align themselves with the direction of the line: the pattern will remain the same whether the line is vertical, horizontal, or curved. It's as if you have a sheet of patterned wallpaper the size of your graphic, and are cutting out a strip of it along the outline of your shape. The trick is therefore to figure out a pattern that looks good regardless of how the line cuts across it.

See example: http://fiddle.jshell.net/LYue4/2/

The basic look is the result of using overlapping dash-array properties. Hover on the image and it will switch to a checkerboard pattern; if you hold the mouse down on the image, it will switch to a diagonal line pattern.

Both look alright, but not great, depending on the angles of the path lines. You'll have to test it on your map to see if it's an improvement or not.

Code for the patterns:

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

You can of course play around with the size of the pattern tile and the thickness of the diagonal lines, but I found that the lines had to be longer than the pattern tile for them to overlap smoothly.