SVG/Tutorials/SVG und JavaScript

Aus SELFHTML-Wiki
< SVG‎ | Tutorials
Wechseln zu: Navigation, Suche

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.

  1. Vorüberlegungen
    • Script in SVG
  2. DOM-Scripting
  3. Animation
  4. Datenvisualisierung
    • Diagramm-Generator
    • Frameworks

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.


Hauptartikel: 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.

schlechtes Beispiel: Event-Attribute und script-Bereich im SVG-Fragment ansehen …
  <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.

Beachten Sie: Dieses Beispiel verstößt gegen einige in den letzten Jahren entwickelte Konventionen:
  • Der script-Bereich befindet sich innerhalb des svg-Fragments, was eigentlich möglich 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
  • 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.
Die folgenden Beispiele verfahren nach diesen Methoden.
Empfehlung: Beachten Sie die separation of concerns und trennen Sie Inhalt, Verhalten und Design.
  • 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)

Osterei erstellen und als SVG abspeichern

Beispiel ansehen …
…

Mehr im Blog: Ostereier selbst herstellen und mitnehmen


Quellen

  1. ↑ MDN: SVG as an Image: Restrictions
  2. ↑ selfhtml.forum: Per Script aus SVG-Datei ein Element verändern.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Tutorials/SVG_und_JavaScript&oldid=98201“