Chevauchement de traits en pointillés/pointillés sur des chemins adjacents en SVG

Question

Je construis une carte de plusieurs comtés qui partagent des frontières.Chaque comté possède son propre chemin fermé et les frontières des comtés adjacents sont donc empilées les unes sur les autres.

J'aimerais donner à chaque comté un trait pointillé.Cependant, une fois appliquées, les frontières qui se croisent semblent laides car les frontières en pointillés de chaque comté se chevauchent, créant une apparence de tiret inégale.

Mes utilisateurs sélectionneront les comtés en passant la souris sur la zone située à l'intérieur des frontières du comté, ce qui rendra (je crois) nécessaire la création d'un chemin fermé pour chaque comté.

Solutions?

Answer 1

J'ai fini par résoudre ce problème différemment que toutes les suggestions.J'ai posté autre, plusQuestion spécifique ici .(Voir ma réponse)

Une fois que j'ai terminé les étapes que j'ai décrites dans l'autre question, j'ai converti le fichier Shapefile à Geojson et le chargé dans ma carte.Je n'ai pas retiré le Geojson qui incluait les polygones enbles, mais j'ai simplement éteint le style de frontière sur cette couche.J'ai ensuite appliqué les mêmes styles de couche au Geojson dissous et cette fois avec une course pointillée.

image de résultat ici.

Answer 2

Oui, les chemins fermés sont nécessaires.Toutefois, les traits pointillés seront toujours inégaux car le tableau de bord est lié à la longueur du chemin, qui sera également defferent pour chaque chemin.Il serait préférable de laisser tomber l'accident vasculaire cérébral ou de le faire rester de la même largeur, sans tiret, pour chaque chemin.Une stratégie que j'ai utilisée pour montrer la souris sur la souris est de réduire l'opacité sur la sourisovie, puis de le retourner à 1,00 sur la souris.

Answer 3

Si vous utilisez un <pattern> pour les traits, vous pouvez définir le motif en fonction du système de coordonnées global, plutôt qu'en fonction des dimensions d'une forme particulière.Ainsi, le motif des différentes formes s’alignera parfaitement.

L'inconvénient est que les motifs ne s'alignent pas avec la direction de la ligne :le motif restera le même, que la ligne soit verticale, horizontale ou courbe.C'est comme si vous aviez une feuille de papier peint à motifs de la taille de votre graphique et que vous en découpiez une bande le long du contour de votre forme.L’astuce consiste donc à trouver un motif qui semble beau, quelle que soit la façon dont la ligne le traverse.

Voir exemple : http://fiddle.jshell.net/LYue4/2/

L'apparence de base est le résultat de l'utilisation de propriétés de tableau de bord qui se chevauchent.Passez la souris sur l'image et elle passera à un motif en damier ;si vous maintenez la souris enfoncée sur l'image, elle passera à un motif de lignes diagonales.

Les deux ont l’air bien, mais pas géniaux, selon les angles des lignes du chemin.Vous devrez le tester sur votre carte pour voir si c'est une amélioration ou non.

Code pour les modèles :

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

Vous pouvez bien sûr jouer avec la taille du carreau à motif et l'épaisseur des lignes diagonales, mais j'ai trouvé que les lignes devaient être plus longues que le carreau à motif pour qu'elles se chevauchent en douceur.