SVG und JavaScript
SVG verwendet genau wie HTML das DOM (Document Object Model), bei dem Sie mit JavaScript auf jedes SVG-Element einfach zugreifen können.
Bei standalone SVG-Dokumenten können Sie im Definitionsabschnitt einen script-Bereich definieren und so JavaScript einbinden. Allerdings ist genau diese Fähigkeit, Scripte auszuführen, Gift für einen Einsatz von SVG-Grafiken im CMS.
Dieser Kurs soll kein Showcase dafür sein, was mit SVG und JavaScript geht – sondern Beispiele zeigen, wie man SVG in Webseiten sinnvoll durch JavaScript erweitert.
- Vorüberlegungen
Script in SVG
- DOM-Scripting
- Eventhandling
- DOM-Methoden
- externe SVG-Dokumente ansprechen
- Animation
- WAAPI
- Schrift von Zauberhand
- Kamerafahrt
Vorüberlegungen
Inline-SVG ist Teil des DOMs einer Webseite und kann problemlos mit den DOM-Methoden angesprochen werden.
Bei einer Einbindung von SVG-Grafiken mit dem img- oder picture-Element erwarten Benutzer aber nur eine Grafik. Aus diesen Gründen ist das Ausführen von Skripten, das Laden weiterer externer Dateien wie Stylesheets oder Bilder und das Kennzeichnen von visited-Links (History-Stealing) nicht möglich.[1]
SVG in externen Dateien ansprechen
Dies geht nur, wenn Sie eine externe SVG-Datei in einem object- oder iframe-Element einbinden. Allerdings ist das SVG-DOM dann nicht Teil des DOMs der Webseite und muss erst separat angesprochen werden, bevor Sie auf die in der externen Grafik enthaltenen SVG-Elemente zugreifen können.[2]
Die Inhalte solcher SVGs lassen sich nur mit Einschränkungen manipulieren, wenn ein Skript von der HTML-Seite versucht, auf diese Dateien zuzugreifen. Dies liegt daran, dass die meisten Browser sog. Cross-Site-Scripting unterbinden wollen, selbst wenn sich die HTML-Seite und die SVG-Dokumente auf demselben Server befinden.
→ externe SVG-Dokumente ansprechen
script in SVG
Mit dem Element script können Sie einen oder mehrere Script-Bereiche im Definitionsabschnitt eines SVG-Dokuments definieren. Innerhalb von Script-Bereichen können Sie Anweisungen der verwendeten Script-Sprache notieren.
<svg viewbox="0 0 880 410">
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function meldung(){
alert('SVG-Element wurde angeklickt!');
}
]]>
</script>
</defs>
<circle cx="100" cy="100" r="25" fill="#c32e04" onclick="meldung()" />
</svg>
Der Kreis erhält ein onclick-Event-Attribut. Durch einen Klick auf ihn wird dann die im Script-Bereich notierte Funktion meldung() aufgerufen, die mit einem alert() bestätigt, dass der Kreis angeklickt wurde.
Viele Beispiele im Netz wollen zeigen, was alles möglich ist und vergessen dabei, dass man von Anfang an Programmierparadigmen wie die Trennung der Zuständigkeiten einhalten sollte.
- Der script-Bereich befindet sich innerhalb des svg-Fragments, was erlaubt aber heute verpönt ist.
- JavaScript darf Sonderzeichen enthalten, die in XML-Dokumenten nicht erlaubt sind.
Deshalb muss script innerhalb des SVG-Dokuments in CDATA gekapselt werden.
In HTML ist dies nicht nötig. - Evtl. enthält die Webseite weitere Scripte in einem Script-Bereich im Head
- JavaScript darf Sonderzeichen enthalten, die in XML-Dokumenten nicht erlaubt sind.
- Es scheint kürzer und einfacher zu sein, Event-Attribute zu verwenden. Sie haben aber viele Nachteile.
- Verwenden Sie addEventListener, um Event-Handler dynamisch an SVG-Elemente anzuhängen.
- Der Inhalt trennt sich dabei in …
- HTML für die „normale“ Webseite mit Menü, Formularen und Text
- SVG für grafische Inhalte wie Diagramme und Infografiken
- CSS legt fest, wie es dargestellt werden soll (Formatierung & Gestaltung)
- JavaScript legt fest, was passieren soll. (Interaktionen, Animationen)
Siehe auch
- Datenvisualisierung
- Balken- und Kreisdiagramme
- Liniendiagramme
- interaktive Landkarten
- Funktionsplotter
Osterei erstellen und als SVG abspeichern
…
Mehr im Blog: Ostereier selbst herstellen und mitnehmen
Quellen
- ↑ MDN: SVG as an Image: Restrictions
- ↑ selfhtml.forum: Per Script aus SVG-Datei ein Element verändern.
