Methoden zum Manipulieren von Informationen
<< < > >> > Hauptteil > Interaktion > SVG DOM > internes Skript > Manipulieren

2. Hauptteil
   2.6 Interaktion
     2.6.2 Events
     2.6.3 SVG DOM
       2.6.3.1 internes Skript
         2.6.3.1.1 Einleitung
         2.6.3.1.2 Zugriff
         2.6.3.1.3 Manipulieren
       2.6.3.2 externes

Das einfache Auslesen von Informationen ist auf jedem Fall notwendig und nützlich, alleine aber recht langweilig, wie die letzten Beispiele gezeigt haben. Interessant wird es dann, wenn man an dem SVG-Dokument auch etwas ändern kann. Dieses Kapitel zeigt die Funktionen, die die Knoten eines SVG-Dokuments manipulieren.

Angefangen wird mit den Funktionen, die Attribute und Style-Eigenschaften verändern. Diese Funktionen können auf alle Element-Knoten angewendet werden.

Funktion Bedeutung
setAttribute(attributeName, Wert) belegt das entsprechende Attribut des Elementknotens mit dem übergebenen Wert.
removeAttribut(attributeName) erntfernt den entsprechende Attributknoten von dem Elementknoten.
setProperty(propertyName, Wert) belegt eine entprechende style-Eigenschaft mit dem übergebene Wert für den Elementknoten. Die Funktion ist auf die Style-Liste (getStyle()) des Element-Knotens anzuwenden.
removeProperty(propertyName) entfernt die entsprechende style-Eigenschaft. Die Funktion ist auf die Style-Liste (getStyle()) des Element-Knotens anzuwenden.

Das Beispiel 50 zeigt mit einem Mouseover-Effekt die Auswirkungen der Funktionen. Ist die Maus über einer Elementgruppe, wird der Stern aus dieser Gruppe vergrössert (setAttribute()) und der Kasten im Hintergrund sichtbar gemacht (removeProperty()). Tritt die Maus wieder aus der Gruppe aus, wird der Stern wieder normal groß (setAttribute()) und der Kasten verschwindet (setProperty()).
Mit Hilfe der nächsten Funktionen kann man Elementknoten erzeugen, bzw. entfernen:

Funktion Bedeutung
createElement(elementName) erzeugt ein entsprechendes Element. Diese Funktion kann nur für das SVG-Dokument (das Resultat von getOwnerDocument()) aufgerufen werden. Noch ist das Element nicht sichtbar, da nicht in die hierarchische Struktur eingeordnet.
cloneNode(deepCopy) erzeugt eine Kopie des aktuellen Knotens. Der Parameter deepCopy ist ein Boolean und bestimmt, ob eine tiefe Kopie (mit Kindknoten) oder nicht gemacht wird.
appendChild(node) fügt einen mit den zuvor vorgestellten Funktionen erzeugten Knoten (node) an den Knoten, für den die Funktion aufgerufen wird an.
insertBefore(new_node, old_node) fügt einen Knoten (new_node) vor einem in der Hierarchie bereits bestehenden Knoten (old_node) ein.
replaceChild(old_node, new_node) ersetzt einen bestehenden Knoten (new_node) durch einen neuen Knoten (old_node).
removeChild(node) entfernt den entsprechenden Knoten (node) aus dem SVG-Dokument.

Das Beispiel 51 stellt einige dieser Funktionen vor. Bei dieser SVG handelt es sich um ein sehr simples Zeichenprogramm: über die Buttons oben in der Leiste kann man wählen, welche Geometrie man zeichnen möchte (Rechteck oder Kreis). Wenn man dann auf die weisse Zeichenfläche klickt, wird diese an der Stelle gezeichnet. Dies geschieht in der Funktion drawGeo(evt), die einen neuen Knoten erstellt und dann an die Gruppe mit der id="canvas" als Kindknoten anhängt. Ausserdem wird eine Geometrie wieder gelöscht, wenn man auf diese klickt, dies erledigt die Funktion remove(evt).
Eigentlich fehlen jetzt nur noch die Funktionen zum Manipulieren von Text:

Funktion Bedeutung
setData(new_text) belegt den Wert eines Textknotens (also den Text) mit dem übergebenen String. Anzuwenden auf einen Textknoten.
appendData(new_text) hängt an einen Text-Knoten den übergebenen Text an.
insertData(pos, new_text) fügt den übergebenen Text an die Stelle eines Textknotens ein, die durch pos bestimmt ist.
deleteData(start, length) löscht Zeichen aus einem Textknoten, start ist der Index des ersten zu löschenden Zeichens, length die Anzahl der zu löschenden Zeichen..
replaceData(start, length, new_text) ersetzt eine Zeichenkette aus einem Textknoten durch die übergebene. Die zu ersetzende Zeichenkette beginnt bei start und ist length Zeichen lang.

Das Beispiel 52 ist eine Erweiterung des Zeichenprogramms aus Beispiel 51. Nun sind zwei Status-Zeilen hinzu gekommen: unten wird die aktuelle Position der Maus dargestellt, oben steht der Name der Geometrie, die momentan gezeichnet werden kann, sowie die Koordinaten der zuletzt gezeichneten Geometrie. Der Scripting-Teil nutzt einige der oben genannten Funktionen (setData(), appendData(), replaceData()). Vom Prinzip her funktionieren die restlichen Funktionen ähnlich und die Funktionsweise ist sicherlich von String-Funktionen anderer Bibliotheken her bekannt.