SVG und JavaScript + foreignObject?

[Matthias Scharwies]

Servus!

Hallo Matthias,

Dieses Tutorial behandelt SVG und JavaScript

ich hab zu diesem Thema mal etwas gebastelt:

Mit Javascript auf eine externe SVG zugreifen

Vielen Dank!

Zur Karte: Ich hatte sie ja von Wikimedia Commons übernommen und 2016 mit dem SVG-Optimizer verschlimmbessert. Ich habe grad das Original von Wikimedia Commons genommen und hier hochgeladen:

Datei:Deutschland-Karte.svg

Die Umrechnung in Farbtöne sieht interessant aus. Die Farbpalette vom Color-Brewer wolltest du nicht übernehmen? 😀 Ich wollte auch schon mit oklch() experimentieren, würde aber YlOrBr&n=9oder daneben YlorRd nehmen. Was meint ihr?

Ich würde auch eine Legende beifügen, wobei meine Klassennamen .class1, .class2,… eher suboptimal sind.

Sollte man bei :hover auf ein Bundesland den Datensatz highlighten und/oder einen Tooltip über das Land einblenden?

---

Zum Wiki-Artikel:

Soll ich Bsp. 4 mit den Arbeitslosen 2016 noch aktualisieren? (aria; custom properties, aktuelle Daten) Entweder Bsp. 4 in die Tonne treten und jetzt gleich ein Bsp. mit DOM-Scripting machen.

[EDIT] Grad beschlossen: Bsp. wird eine Infografik mit Vergleich 2016 / 2020 / 2024 - eigentlich sollte es ein Standalone-SVG werden, jetzt wohl doch als 'Inline-SVG in einer Webseite. [/EDIT]

---

Kommt dein Beispiel hier hin oder ins DOM-Scripting-Tutorial?

Schlusswort ist dieses:

„Im realen Einsatz empfiehlt es sich, die interaktive Karte als SVG-Dokument (→ Einzelansicht) in einem [[object]]-Element einzubinden, da ältere Versionen des Internet-Explorer die inline SVG-Grafik in der Standardgröße von 300x150px darstellen. Leider ist ein solches Beispiel mit der Mediawiki-Software (noch) nicht möglich.“

Wär gut, wenn das mal weg käme.

Herzliche Grüße

Matthias Scharwies