Sprazos discontinuos / punteados superpuestos en caminos adyacentes en SVG

Question

Estoy construyendo un mapa de varios condados que comparten las fronteras.Cada condado es su propio camino cerrado, y por lo tanto, los límites de los condados adyacentes se apilan entre sí.

Me gustaría darle a cada condado un accidente cerebrovascular.Sin embargo, cuando se aplica, las fronteras que se cruzan se ven feas como las fronteras discontinuas de cada superposición del condado, creando un aspecto desigual.

Mis usuarios seleccionarán los condados mordiendo el área dentro de las fronteras del condado, por lo tanto (creo) haciendo que sea necesario crear una ruta cerrada para cada condado.

soluciones?

Answer 1

Terminé resolviendo esto de manera diferente a cualquiera de las sugerencias.Publiqué otro, másPregunta específica aquí .(Ver mi respuesta)

Una vez que completé los pasos que describí en la otra pregunta, convirtí la shapefile de nuevo a GeoJson y lo cargé en mi mapa.No quité el geojson que incluía los polígonos enteros, pero simplemente apagó el estilo de la frontera en esa capa.Luego aplicé los mismos estilos de capa al geojson disuelto, y esta vez con un derrame cerebral.

Imagen del resultado aquí.

Answer 2

Sí, se requieren las rutas cerradas.Sin embargo, los accidentes cerebrovasculares siempre serán desiguales porque la matriz de destellos está relacionada con la longitud de la ruta, que será desferada para cada ruta.Sería mejor dejar caer el accidente cerebrovascular o que permanezca el mismo ancho, sin guión, por cada camino.Una estrategia que he usado para mostrar el mouse, es reducir la opacidad en el mouseover, luego devolverlo a 1.00 en el mouse Out.

Answer 3

Si usa una <pattern> para los trazos, puede definir El patrón basado en el sistema de coordenadas general, en lugar de basarse en las dimensiones de cualquier forma. Así que el patrón para diferentes formas se alineará perfectamente.

El inconveniente es que los patrones no se alinearán con la dirección de la línea: el patrón seguirá siendo el mismo si la línea es vertical, horizontal o curva. Es como si tuviera una hoja de papel tapiz estampado del tamaño de su gráfico, y está cortando una tira de la misma a lo largo del contorno de su forma. El truco es, por lo tanto, descubrir un patrón que se ve bien, independientemente de cómo la línea se corta a través de ella.

Ver ejemplo: http://fiddle.jshell.net/lyue4/2/

El aspecto básico es el resultado de usar propiedades superpuestas de la matriz de destellos. Flote en la imagen y cambiará a un patrón de tablero de ajedrez; Si sostiene el mouse hacia abajo en la imagen, cambiará a un patrón de línea diagonal.

Ambos se ven bien, pero no son geniales, dependiendo de los ángulos de las líneas de la trayectoria. Tendrá que probarlo en su mapa para ver si es una mejora o no.

Código para los patrones:

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

Puede jugar por supuesto con el tamaño del azulejo del patrón y el grosor de las líneas diagonales, pero descubrí que las líneas tenían que ser más largas que el azulejo de patrones para que se superpongan sin problemas.