Überlappende gestrichelte / gepunktete Hübe auf benachbarten Pfaden in SVG

Question

Ich baue eine Karte von mehreren Grafschaften, die Grenzen teilen.Jede Bezirk ist der eigene beiliegende Weg, und daher werden die Grenzen benachbarter Grafschaften übereinander gestapelt.

Ich würde gerne jedem Bezirk einen gestrichelten Schlag angeben.Wenn Sie jedoch angewendet haben, sehen die kreuzenden Grenzen jedoch hässlich wie die gestrichelten Grenzen jeder Bezirksüberlappung, wodurch ein unebenes Dash-Aussehen erzeugt wird.

Meine Nutzer wählen Grafschaften aus, indem sie über die Gegend innerhalb der Grafschaftsgrenzen konzentriert werden, somit (glaube ich, dass es notwendig ist, einen eingeschlossenen Weg für jede Grafschaft zu erstellen.

lösungen?

Answer 1

Ich habe dieses anders gelöst, als jeder der Vorschläge.Ich habe ein anderer, mehrSpezifische Frage hier .(Siehe meine Antwort)

Nachdem ich die Schritte abgeschlossen habe, die ich in der anderen Frage umrissen habe, habe ich den Shapefile zurück in Geojson umgewandelt und in meine Karte geladen.Ich habe den Geojson nicht entnommen, der die gesamten Polygone enthielt, aber einfach den Grenzstil auf dieser Ebene ausstellte.Ich habe dann die gleichen Schicht-Stylings an den gelösten Geojson angewendet, und diesmal mit einem gestrichelten Hub.

Bild des Ergebnisses hier.

Answer 2

Ja, die beiliegenden Pfade sind erforderlich.Eine gestrichelte Striche sind jedoch immer ungleichmäßig, da das Dash-Array mit der Pfadlänge zusammenhängt, die für jeden Pfad abschließend ist.Es wäre am besten, den Hub entweder abzutreten, oder dass es für jeden Pfad dieselbe Breite ohne Strich bleiben.Eine Strategie, die ich zur Anbetracht der Maus verwendet habe, besteht darin, die Deckkraft auf den Mauszeiger zu reduzieren, und dann auf 1,00 mit der Maus raus.

Answer 3

Wenn Sie ein <pattern> für die Striche verwenden, können Sie definieren das Muster basierend auf dem Gesamtkoordinatensystem, anstelle der Abmessungen einer beliebigen Form. Das Muster für verschiedene Formen läuft also perfekt auf.

Der Nachteil ist, dass sich Muster nicht mit der Richtung der Linie ausrichten: Das Muster bleibt gleich, ob die Linie vertikal, horizontal oder gekrümmt ist. Es ist, als hätten Sie ein Blatt gemusterter Tapetengröße Ihrer Grafik und schneiden einen Streifen entlang des Umrisss Ihrer Form aus. Der Trick ist daher, ein Muster herauszufinden, das gut aussieht, unabhängig davon, wie die Linie darüber schneidet.

Siehe Beispiel: http://fiddle.jshell.net/lyue4/2/

Das Basis-Look ist das Ergebnis der Verwendung überlappender Dash-Array-Eigenschaften. Bewegen Sie das Bild auf dem Bild und wechselt in ein Schachbrettmuster. Wenn Sie die Maus auf dem Bild halten, wechselt es zu einem diagonalen Linienmuster.

Beide sehen in Ordnung aus, aber nicht toll, je nach Winkel der Pfadlinien. Sie müssen es auf Ihrer Karte testen, um zu sehen, ob es eine Verbesserung ist oder nicht.

Code für die Muster:

generasacodicetagpre.

css:

generasacodicetagpre.

Sie können natürlich mit der Größe der Musterfliese und der Dicke der diagonalen Linien herumspielen, aber ich fand heraus, dass die Linien länger als die Musterfliesen sein mussten, damit sie sich reibungslos überlappen mussten.