Corsa con tratteggi sovrapposti / tratteggiati su percorsi adiacenti in SVG

Question

Sto costruendo una mappa di diverse contee che condividono i confini.Ogni contea è il proprio percorso chiuso, e quindi i confini delle contee adiacenti sono impilati tra loro.

Mi piacerebbe dare a ogni contea un colpo tratteggiato.Tuttavia, se applicato, i confini intersecanti sembrano brutti mentre i bordi tratteggiati di ogni contea si sovrappongono, creando un aspetto irregolare del cruscotto.

I miei utenti selezionano le contee mousing sull'area all'interno dei confini della contea, quindi (credo) rendendo necessario creare un percorso chiuso per ogni contea.

Soluzioni?

Answer 1

Ho finito per risolvere questo in modo diverso da qualsiasi dei suggerimenti.Ho pubblicato Un altro, altroDomanda specifica qui .(Vedi la mia risposta)

Una volta completato i passaggi che ho delineato nell'altra domanda, ho convertito la shapefile a Geojson e lo ha caricato nella mia mappa.Non ho rimosso il Geojson che includeva tutti i poligoni, ma semplicemente spento lo stile di confine su quel livello.Ho quindi applicato gli stessi stili di livello al Geojson disciolto e questa volta con un colpo tratteggiato.

Immagine del risultato qui.

Answer 2

Sì, sono richiesti i percorsi allegati.Tuttavia, i tratti tratteggiati saranno sempre irregolari perché il cruscotto è correlato alla lunghezza del percorso, che sarà deferente per ogni percorso.Sarebbe meglio lasciare il tratto o farlo rimanere la stessa larghezza, senza trattino, per ogni percorso.Una strategia che ho usato per mostrare il mouse sopra, è ridurre l'opacità su Mouseover, quindi restituirlo a 1,00 al mouse.

Answer 3

Se si utilizza un <pattern> Per i tratti, puoi definire il modello in base al sistema di coordinate complessivo, invece di in base alle dimensioni di qualsiasi forma. Quindi il modello per forme diverse si allineerà perfettamente.

Il lato negativo è che i modelli non si allineano con la direzione della linea: il modello rimarrà lo stesso se la linea è verticale, orizzontale o curva. È come se avessi un foglio di carta da parati modellato le dimensioni della tua grafica e riducono una striscia lungo il contorno della tua forma. Il trucco è quindi quello di capire un modello che sembra buono indipendentemente da come la linea lo abbassa.

VEDI ESEMPIO: http://fiddle.jshell.net/lyue4/2/

L'aspetto di base è il risultato dell'utilizzo delle proprietà della matrice di Dash-Array sovrapposte. Passavia sull'immagine e passerà a un modello di scacchiera; Se si tiene premuto il mouse sull'immagine, passerà a un motivo a riga diagonale.

Entrambi guardano bene, ma non eccezionali, a seconda degli angoli delle linee del percorso. Dovrai testarlo sulla tua mappa per vedere se è un miglioramento o no.

Codice per i modelli:

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

.

Puoi ovviamente giocare con la dimensione della piastrella del modello e lo spessore delle linee diagonali, ma ho scoperto che le linee dovevano essere più lunghe della tessera del modello da sovrapporsi agevolmente.