SVG/Tutorials/SVG und JavaScript

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

SVG-Dokumente basieren wie HTML auf dem DOM (Document Object Model) und können deshalb mit JavaScript …

  • auf Events wie click oder mouseover interaktiv reagieren
  • dynamisch verändert
  • zur Datenvisualisierung verwendet

werden.

Beachten Sie: Es ist zwar auch möglich, SVG-Dokumente mittels iframe-, embed- oder object-Tag in HTML-Seiten einzubinden, nur lassen sich die Inhalte solcher SVGs nur mit starken 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.

Einbindung[Bearbeiten]

JavaScript kann über das script-Element im head oder body Ihrer Webseite eingebunden werden. Bei standalone SVG-Dokumenten können Sie im Definitionsabschnitt einen script-Bereich definieren und so JavaScript einbinden.


Event-Handling[Bearbeiten]

SVG kann wie HTML durch Event-Handler mit Scripten verbunden werden.[1]

Beispiel 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.
Empfehlung: Beachten Sie die separation of concerns und trennen Sie Inhalt, Verhalten und Design. Verwenden Sie addEventListener, um Event-Handler dynamisch an SVG-Elemente anzuhängen. Die unteren Beispiele verfahren nach diesen Methoden.


grafische Event-Handler[Bearbeiten]

Beachten Sie: onfocusin und -focusout funktionieren nicht im Firefox; verwenden Sie onclick.
  • onactivate: vergleichbar mit onclick, wirkt aber auch bei anderen Eingabegeräten[2]
Beachten Sie: onactivate funktioniert nicht im Firefox; verwenden Sie onclick.

Dokument Event-Handler[Bearbeiten]

Diese Event-Handler können nur vom SVG-Element gefeuert werden.

  • onabort : Abbruch beim Laden der Seite, unvollständig geladen
  • onerror : Element nicht richtig geladen o. Skript läuft fehlerhaft
  • onload: Elemente & Unterelement vollständig geladen
  • onresize: Dokumentansicht wird angepasst
  • onscroll : Dokumentansicht wird entlang der x/y-Achsen verschoben
  • onunload : Dokument wird aus Fenster o. Frame entfernt
  • onzoom : Dokument-Zoom-Stufe oder Aktueller Maßstab wird geändert

Animation Event-Handler[Bearbeiten]

Beachten Sie: Diese Events werden nur für SMIL-Animationen verwendet, die im IE und Chrome nicht unterstützt werden.

DOM-Skripting[Bearbeiten]

SVG verwendet genau wie HTML das DOM (Document Object Model), bei dem Sie mit JavaScript auf jedes SVG-Element einfach zugreifen können. Versehen Sie die Elemente mit einer id und sprechen Sie sie mit document.getElementById an.

Wenn Sie SVG-Fragmente inline in HTML-Webseiten integrieren, sind die SVG-Elemente Teil des DOM. Sie können auf jedes SVG-Element wie auf ein beliebiges HTML-Element zugreifen:

Beispiel ansehen …
document.addEventListener("DOMContentLoaded", function () {
  function aenderung () {
    var farben = new Array(
      "red", "skyblue", "#dfaa20", "#ebf5d7","#e4ebf2", "#5a9900",
      "lime", "#df6c20", "brown", "#5c82d9", "burlywood",
      "blueviolet", "#c32e04", "#ffebe6" ,"#5c82d9"
    );

    var fuellFarbe = Math.floor(farben.length * Math.random());

    if (fuellFarbe == farben.length) {
      fuellFarbe = farben.length-1;
    }

    fuellFarbe = farben[fuellFarbe];
    kreis.setAttribute("fill", fuellFarbe);
  }

  document.getElementById("kreis").addEventListener("click", aenderung);
  document.getElementById("text").addEventListener("click", aenderung);
});
Der Kreis wird mit mit document.getElementById angesprochen und erhält mit addEventListener einen Event-Handler zugewiesen. Der Text ebenfalls, sonst passiert ausgerechnet dann nichts, wenn der Benutzer tatsächlich auf den Text (und nicht auf die Kreisfläche daneben) klickt.
Wenn nun auf den Kreis geklickt wird, wird die Funktion aenderung() aufgerufen, die nach dem Zufallsprinzip Farbwerte aus einem Array ausliest und dem Kreis mit setAttribute() zuweist.

Ansprechen von SVG-Elementen in externen Dateien[Bearbeiten]

Etwas komplizierter wird es, wenn Sie eine externe SVG-Datei in einem object- oder iframe-Element einbinden wollen. Dann ist das SVG-DOM 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.[3]


Bei einer Einbindung mit dem img- oder picture-Element erwarten Benutzer 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.[4]

Attribute mit Namensraumangaben[Bearbeiten]

In Codebeispielen im Netz finden Sie oft die Methoden:

  • setAttributeNS
  • getAttributeNS
  • hasAttributeNS
  • removeAttributeNS
  • setAttributeNodeNS
  • setAttributeNodeNS

Das NS am Ende der Methoden steht für Namespace aware. Bei diesen Methoden müssen Sie als ersten Parameter den Namensraum des zu ändernden Elements angeben. Bei einem Einsatz im HTML-DOM benötigen Sie diese Methoden nicht.[5]

Anwendungsbeispiele[Bearbeiten]

Zahnräder:

Quellen[Bearbeiten]

  1. http://www.w3.org/TR/SVG/script.html#EventHandling
  2. http://www.ra.ethz.ch/cdstore/www2011/logos/primer/s10.htm
  3. selfhtml.forum: Per Script aus SVG-Datei ein Element verändern.
  4. MDN: SVG as an Image: Restrictions
  5. W3C: setAttributeNS