Frage zum Wiki-Artikel „SVG_und_JavaScript“

[Rolf B]

Hallo Alexander,

bei einem Treffer soll der Hoover-Effekt

HILFE! Meine Maus ist weg!!!! Sie wurde in den Bildschirm gesaugt!

Hoover ist eine amerikanische Staubsaugermarke und wurde zum Allgemeinbegriff für Staubsauger in den USA. So wie Tempo bei uns für Papiertaschentücher. Du meinst Hover - schweben. 😂

Suchfunktion, die es dem User erlaubt, seine Postleitzahl anzugeben

Ein Eingabefeld, dessen Wert ein PLZ Gebiet hervorheben soll? Für diejenigen, die nicht wissen, wo die PLZ 12345 zu finden ist?

Da Du die PLZ in den IDs als Namensanteil drin hast, kannst Du die querySelector-Methode mit einem Attribut-Prefixselektor arbeiten.

Das stößt Du entweder aus einem input- oder change-Event des Eingabefeldes heraus an, oder über das click-Event eines "Suchen" Buttons. Im Eventhandler prüfst Du, ob im Eingabefeld eine valide PLZ steht (sprich: 5 Stellen nur Ziffern - schwieriger wird es, wenn Du auch Vertriebsgebiete im Ausland dazu bekommst) und kannst das Polygon dann so finden - unter der Annahme, dass das path-Elemente sind.

const plzPolygon = svgElement.querySelector("path[id^=" + plz + "]")

Damit findest Du das path-Element, das das Polygon für eine bestimmte PLZ enthält, und kannst ihm eine Klasse geben, die dann per CSS für eine Hervorhebung sorgt. Mit animierter Randfarbe, Zoom-Effekt und sonstigem Bling Bling, ganz wie Du willst.

Wenn Du den Ortsnamen aus der ID herauslässt, kannst Du auch einfach getElementById verwenden. Warum ist der überhaupt in der ID drin? In data-info ist er auch drin, das ist redundant.

Die weitere Frage wäre dann, ob Du auch das ganze Vertriebsgebiet zu dieser PLZ hervorheben willst. Dafür könntest Du die Vertriebsgebiets-ID als weiteres data-Attribut an die Polygone hängen, und dann, wenn Du das Polygon für die eingegebene PLZ hast, suchst Du alle Polygone mit der gleichen Vertriebs-ID und markierst die auch.

Wenn Du noch weitere Daten zum Vertriebsgebiet anzeigen willst, brauchst Du ein Array mit den Daten dazu (oder einen Webservice, von dem Du sie fetchen kannst), und kannst damit ein informatives <aside> befüllen.

Rolf