SVG Tutorial

Um auf den Text-Knoten zuzugreifen (die eigentlichen Textdaten/-zeichen), wird die Methode getFirstChild() auf den Knoten eines text-Elements verwendet. Den Knoten des text-Elements selbst, können Sie durch die Methoden des document-Objekts getElementById() oder getElementsByTagName() erzeugen.

Um Texte zu manipulieren, können Sie die nachfolgenden Methoden verwenden, die alle auf einen Text-Knoten angewendet werden (.. wie Sie text-Elemente inclusive Textdaten neu erzeugen können ist in Kapitel 16.9 erläutert).

• setData()
  Mit Hilfe dieser Methode können Sie den Wert eines Textknotens überschreiben. Als Parameter wird die neue Zeichenkette übergeben.
• appendData()
  Diese Methode bietet Ihnen die Möglichkeit eine neue Zeichenkette an eine bestehenden Textknoten anzuhängen. Als Parameter wird die neue Zeichenkette übergeben.
• insertData()
  Durch diese Methode können Sie eine neue Zeichenkette an einer beliebigen Position innerhalb des Textknotens einfügen. Als erster von zwei Parametern wird zuerst die Zeichenpostion angegeben an der die neue Zeichenkette platziert werden soll. Als zweiter Parameter wird die neue Zeichenkette übergeben.
• deleteData()
  Wenn Sie eine beliebige Zeichenkette aus dem Textknoten entfernen möchten, können Sie diese Methode verwenden. Die Methode erwartet zwei Ganzzahlen als Parameter: das Zeichen, ab dem gelöscht werden soll, dabei beginnt die Numerierung bei 0 und wie viele Zeichen gelöscht werden sollen.
• replaceData()
  Verwenden Sie diese Methode, wenn Sie eine beliebige Zeichenkette aus dem Textknoten durch eine andere, neue Zeichenkette ersetzen möchten. Diese Methode erwartet drei Parameter: zwei Ganzzahlen und die neue Zeichenkette. Durch die erste Ganzahl wird das Zeichen festgelegt, ab dem ersetzt werden soll, die zweite Ganzahl legt fest, wie viele Zeichen ersetzt werden sollen. An genau der Stelle wo die Zeichen entnommen wurden, wird die neue Zeichenkette (der dritte Parameter) eingefügt.
• substringData()
  Wenn Sie eine beliebige Zeichenkette aus dem Textknoten als Rückgabewert benötigen, können Sie diese Methode verwenden. Die Methode erwartet zwei Ganzzahlen als Parameter: das Zeichen, ab dem extrahiert werden soll, dabei beginnt die Numerierung bei 0 und wie viele Zeichen extrahiert werden sollen. Die so entnommene Zeichenkette kann in einer Variablen aufgefangen werden.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="418px" height="220px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Javascript und SVG</title>
  <desc>
    Javascript: Methoden zur Manipulation von Textknoten.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function titel_over(){
        var textknoten = document.getElementById('titel').getFirstChild();
        textknoten.setData('Manipulierter Textknoten');
      }
      function titel_out(){
        var textknoten = document.getElementById('titel').getFirstChild();
        textknoten.setData('Textknoten manipulieren');
      }
      function rot(){
        var textknoten = document.getElementById('text_rot').getFirstChild();
        textknoten.appendData(' TOLL!');
      }
      function gruen(){
        var textknoten = document.getElementById('text_gruen').getFirstChild();
        if (textknoten.substringData(26,1) == ' '){
          textknoten.insertData(26,'(e)');
        }
      }
      function blau(){
        var textknoten = document.getElementById('text_blau').getFirstChild();
        textknoten.deleteData(16,22);
      }
      function schwatt(){
        var textknoten = document.getElementById('text_schwatt').getFirstChild();
        textknoten.replaceData(20,100,'hat diesen Text verändert.');
      }
      function reset(){
        var tk1 = document.getElementById('text_rot').getFirstChild();
        var tk2 = document.getElementById('text_gruen').getFirstChild();
        var tk3 = document.getElementById('text_blau').getFirstChild();
        var tk4 = document.getElementById('text_schwatt').getFirstChild();
        tk1.data = 'Der rote Button verändert diesen Text.';
        tk2.data = 'Der grüne Button verändert diesen Text.';
        tk3.data = 'Der blaue Button verändert diesen Text.';
        tk4.data = 'Der schwarze Button verändert diesen Text.';
      }
    ]]>
    </script>

<!-- Styles -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:14px;}
    ]]>
    </style>
  </defs>

<!-- die Texte -->
  <text id="titel" x="20" y="35"
    style="font-size:24px; font-weight:bold;"
    onmouseover="titel_over()"
    onmouseout="titel_out()">
    Textknoten manipulieren
  </text>
  <text id="text_rot" x="50" y="80"
    style="fill:red;">Der rote Button verändert diesen Text.</text>
  <text id="text_gruen" x="50" y="110"
    style="fill:green;">Der grüne Button verändert diesen Text.</text>
  <text id="text_blau"
    x="50" y="140"
    style="fill:blue;">Der blaue Button verändert diesen Text.</text>
  <text id="text_schwatt" x="50" y="170">Der schwarze Button verändert diesen Text.</text>

<!-- die Buttons -->
  <rect x="25" y="67" width="15" height="15"
    style="fill:red;"
    onclick="rot()" />
  <rect x="25" y="97" width="15" height="15"
    style="fill:green;"
    onclick="gruen()" />
  <rect x="25" y="127" width="15" height="15"
    style="fill:blue;"
    onclick="blau()" />
  <rect x="25" y="157" width="15" height="15"
    onclick="schwatt()" />
  <g onclick="reset()">
    <rect x="50" y="185" width="45" height="20"
      style="fill:none; stroke:black;" />
    <text x="53" y="200">Reset</text>
  </g>
</svg>
      

Das obige Beispiel enthält insgesamt sieben Funktionen. Alle Funktionen verwenden Methoden zur Manipulation eines Textknotens, um den Inhalt eines der fünf text-Elemente (also die reinen Textdaten) innerhalb Grafik zu verändern.
Zu diesem Zweck wird in allen Funktionen mit Hilfe der Methoden getElementById() und getFirstChild(), zuerst der entsprechende Textknoten ermittelt.

Die ersten beiden Funktionen titel_over() und titel_out() verändern den Textknoten des text-Elements titel durch die Methode setData(). Diese Methode überschreibt den ursprünglichen Textinhalt duch die Zeichenkette, die als Parameter übergeben wird.
Die Funktion titel_over wird durch einen mouseover-Event, die Funktion titel_out durch eine mouseout-Event ausgelöst, die sich direkt auf das text-Element titel beziehen (also wenn Sie mit den Maus den Bereich dieses Elements betreten bzw. wieder verlassen).

Die folgenden vier Funktionen werden durch einen Klick auf die farbigen Rechtecke ausgelöst, die vor jeder weiteren, entsprechend farbigen Zeichenkette in der Grafik plaziert sind.

Die Funktion rot() verändert den Textknoten des text-Elements text_rot.
Mit Hilfe der Methode appendData() wird bei jedem Klick die als Parameter angegeben Zeichenkette ( TOLL!) an die bestehenden Textdaten angehängt.

Die Funktion gruen() verändert den Textknoten des text-Elements text_gruen.
In dieser Funktion wird zuerst innerhalb einer if-Entscheidung das 26-ste Zeichen der Zeichenkette überprüft. Dies geschieht innerhalb der if-Bedingung durch die Methode substringData(). Nur wenn die Teilzeichenkette, die an der 26-sten Stelle beginnt und genau 1 Zeichen lang ist, ein Leerzeichen enthält wird die Anweisung innerhalb der if-Entscheidung ausgeführt.
Hier wird die Zeichenkette durch die Methode insertData() verändert. Mit Hilfe dieser Methode wird an der 26-sten Stelle der Zeichenkette eine neue Zeichenkette eingefügt, die der Methode als Parameter übergeben wird ((e)). Jetzt ist das 26-ste Zeichen eine runde Klammer.

Die Funktion blau() verändert den Textknoten des text-Elements text_blau.
Mit Hilfe der Methode deleteData() wird die Teilzeichekette, die an der Position 16 beginnt und 22 Zeichen lang ist, aus der ursprünglichen Zeichenkette entfernt.

Die Funktion schwatt() verändert den Textknoten des text-Elements text_schwatt.
Durch die Methode replaceData() wird die Teilzeichenkette, die an der Position 20 beginnt und, durch die angegebene Länge 100, auf jeden Fall den Rest der Zeichenkette beinhaltet, durch eine neue Zeichenkette ersetzt. Diese neue Zeichenkette (hat diesen Text verändert) wird der Methode replaceData() als letzter Parameter übergeben.

Die Funktion reset(), die durch einen Klick auf den Button mit der Aufschrift Reset ausgelöst wird, stellt in allen Textknoten durch eine Zuweisung (Eigenschaft = 'Wert') wieder den ursprünglichen Zustand her.