Man muss sich immer weiter entwickeln. Und wann soll man denn mit liegen gebliebenen Sachen experimentieren, wenn nicht in der Freizeit? Die Tatsache, dass SVG endlich in allen Browsern verfügbar ist und laut caiuse.com fast von 90% aller Web-User genutzt werden kann, ist sehr erfreulich. Es war mir schon immer ein Graus, „schwere“ statische Grafikdateien herstellen bzw. herunterladen zu müssen, die mit einer leichtgewichtigen Vektorgrafik doch ersetzt und interaktiv gestaltet werden können. Was dabei entstanden ist, findet man hier und auf github.
SVG als XML-basierte Vektorgrafik hat viele Vorteile. Vor allem die direkte Einbettung ins HTML und die vergleichbaren Gestaltungsmöglichkeiten wie das HTML. Man kann JavaScript dafür einspannen und einzelne Element nach Belieben umgestalten. Je nach Browser werden einige „Zauber“ (wie Filter und Effekte) noch nicht unterstützt aber schon die Basisfunktionen sind „der Rede wert“.
Als Erstes muss man eine SVG-Grafik selber erstellen oder finden. In meinem Fall war es Wikimedia. An dieser Stelle vielen Dank an Lantus – den Autor der Datei (wenn auch wahrscheinlich nur „Umwandler“ anderer Daten).
Dann bearbeitet man sie so, dass unnötige Pfade entfernt werden. Andere (wenn nötig gruppiert) versieht man mit IDs, die man später ansprechen will.
Die fertige Datei kopiert man entweder als Text direkt ins HTML einer Seite, bindet als Link ein oder packt wie ich als String in ein jQuery-Plugin, um es mehrfach in verschiedenen Bereichen verwenden zu können. Alles zusammen sieht dann in etwa so aus:
http://jsfiddle.net/RobertKolatzek/dqJd6/
Der Trick mit dem SVG-String im JS war nötig, um alles zusammen zu halten und nicht auch externe Quellen verweisen zu müssen. Mit dem Einbinden des Plugins haben es die Webmaster alles, was sie brauchen. Dann kommt nur noch die Einhaltung einer bestimmten Konvention, die mit der Morphologie eines jQuery-Plugins in Verbindung steht. Hier das Beispiel aus dem Fiddle:
$('div').SaarLK({'fill': '#22DD88'});
$('div.SaarLK.1').data('SaarLK').hov(['SLS', 'MZG']);
$('div.SaarLK.2').data('SaarLK').hov('HOM', {'fill': '#dd9933', stroke: '#dd4422', "stroke-width": 5});
$('section').SaarLK();
$('section.SaarLK.1').data('SaarLK').hov('SB');
Zeile 1 reichert mit der Methode „SaarLK“ alle DIVs um die SVG-Grafik an. Dabei wird schon für alle festgelegt, dass die Füllfarbe (im SVG-Jargon „fill“ und nicht „background-color“ wie im CSS genannt) komisch-grün (‚#22DD88‘ sein soll).
In Zeile 2 werden die Landkreise (2 Stück als Array) „SLS“ und „MZG“ (immer brav nach Autokennzeichen!) hervorgehoben werden. Das geschieht mit der Methode „hov“. Diese Methode kann man nicht direkt auf ein Element loslassen. (Ich habe noch keine Lösung dafür gefunden). Deshalb wird das bei der Initialisierung („SaarLK“) erstellte Objekt mit Hilfe von „data(‚SaarLK‘)“ hervorgeholt. Wenn die Initialisierung nicht auf eine ID (ein konkretes Element) ging, muss man sich entscheiden welches Element aus der initialen Auswahl gemeint ist. Dazu gibt es von mir eine Hilfestellung. Jedes von SaarLK initialisierte Element bekommt die Klasse SaarLK und die nummerische Klasse, die der Reihenfolge der Elemente bei der Initialisierung entspricht: Der erste DIV aus der ersten Initialisierung wird also die Klassen „SaarLK“ und „1“ besitzen. Der Zweite „SaarLK“ und „2“.
In Zeile 3 wird nur ein Landkreis hervorgehoben, dafür aber mit eigenen SVG-style-Regeln, die man in einem Objektliteral – wie bei jQuery üblich – übergibt.
In Zeile 4 wird erneut eine Auswahl (diesmal „SECTION“) getroffen. Es werden die Voreinstellungen des Plugins übernommen.
In Zeile 5 wird die gerade getroffene neue Auswahl (das erste SECTION-Element – also „section.SaarLK.1“ [es wurde ja bei der Auswahl von neuem gezählt]) benutzt, um darin den Regionalverband (Kennzeichen „SB“) mit den Vorgabewerten des Plugins zu markieren.
Das SVG passt sich immer dem Element an, in dem es sich befindet. Das funktioniert mit Hilfe von bestimmten Attributen im SVG. Wie das genau geht, sieht man in diesem Beitrag.