Leitfaden zu skalierbaren Vektorgrafiken, Teil 2

Wenn ein Benutzer auf eines der Rechtecke in Beispiel B klickt, wird dieses vor den beiden anderen Rechtecken dargestellt. Dieses Beispiel verwendet die Methode appendChild() zur Änderung der sichtbaren Reihenfolge von Elementen, indem ihre Position im Document Object Model (DOM) geändert wird. Dies ist eine nützliche Technik zum Erstellen von Ebenen-Effekten und Widgets mit Registerkarten.

Beispiel C: DOM-Manipulation

Beispiel C ist ein Beispiel für eine DOM-Manipulation, bei welcher der Benutzer dynamisch Text erzeugt, indem er auf den blauen Button klickt. Mit der Methode createElement() erzeugt man einen neuen leeren Knoten, legt die Attribute des neuen Knotens fest und fügt den Knoten mit der Methode appendChild() ins DOM ein.

Das zuletzt hinzugefügte Text-Element wird gelöscht, sobald der Benutzer auf eines der Text-Elemente klickt. Um das korrekte Element zu bearbeiten, benutzt der Code die Methode getElementById() und ruft dann die Methode removeChild() des übergeordneten Elements auf, um das Element zu löschen.

Beispiel D: Eine Linie zeichnen

Beispiel D zeigt eine weitere raffinierte Anwendung einer DOM-Manipulation. Der Benutzer kann eine Linie zeichnen, indem er für den Anfangspunkt mit der Maus klickt, mit gedrückter Maustaste die Linie zieht und am Endpunkt die Maustaste wieder loslässt. Das SVG-Dokument definiert eine Linie, die anfänglich unsichtbar ist, da die x- und y-Werte für Anfang und Ende gleich Null sind.

Beim ersten Klick des Benutzers auf die SVG-Grafik werden die x1- und y1-Werte der Linie auf die x- und y-Werte der Maus gesetzt. Wenn der Benutzer nun die Maus bewegt, werden die x2- und y2-Werte auf die aktuellen x- und y-Werte der Maus gesetzt. Die Linie wird dynamisch immer wieder neu gezeichnet, wenn der Benutzer die Maus bewegt. Sobald der Benutzer die Maustaste loslässt, wird die Linie in ihrer Endposition gezeichnet.