SVG Tutorial

Mit Hilfe der folgenden Methoden können Sie Elemente bzw. Elementknoten erzeugen oder entfernen. Diese Methoden sind also auf einen Elementknoten anzuwenden.

• createElement()
  Erzeugt ein neues Element. Erwartet als Parameter den Namen des Elements.
• cloneNode()
  Dupliziert einen Knoten. Erwartet als Parameter entweder true oder false. Wenn Sie true übergeben, werden auch die Kind-Knoten mitkopiert, wenn Sie false verwenden, nur das Element selbst.
• createTextNode()
  Erzeugt einen Text-Knoten, d.h. die eigentliche Zeichenkette für ein text-Element und explizit nicht das text-Element selbst. Erwartet als Parameter eine Zeichenkette. Derart erzeugte Text-Daten können dann als Kind-Element (d.h. als eigentlicher Text-Inhalt) eines text-Elements verwendet werden (siehe zweites Beispiel auf dieser Seite).
• appendChild()
  Fügt einen duplizierten Knoten in die Baumstruktur des SVG Dokuments ein. Erwartet als Parameter den Namen des duplizierten Knotens und wird auf den entsprechenden Eltern-Elementknoten angewandt.
• insertBefore()
  Fügt einen duplizierten Knoten an einer genau festgelegten Stelle in die Baumstruktur des SVG Dokuments ein. Erwartet zwei Parameter: den Namen des duplizierten Knotens und den Namen eines bestehenden Knotens, vor dem der duplizierte Knoten eingefügt wird. Auch diese Methode ist auf den entsprechenden Eltern-Elementknoten anzuwenden.
• replaceChild()
  Ersetzt einen bereits bestehenden Elementknoten durch einen zweiten. Erwartet die Namen der beiden Knoten als Parameter. Diese Methode wird ebenfalls auf den entsprechenden Eltern-Elementknoten angewandt.
• removeChild()
  Entfernt einen Elementknoten aus der Baumstruktur des SVG Dokuments. Erwartet den Namen des Knotens als Parameter. Diese Methode wird ebenfalls auf den entsprechenden Eltern-Elementknoten angewandt.

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="360px" height="240px"
     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 Knoten.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function sterne(){
        var svgElement = document.documentElement;
        var stern = document.createElement('polygon');
        stern.setAttribute('points',
          '0 20, 15 15, 20 0, 25 15, 40 20, 25 25, 20 40, 15 25');
        stern.setAttribute('style','fill:yellow; stroke:black');
        stern.setAttribute('transform', 'translate(110,60) scale(4)');
        svgElement.appendChild(stern);
        var stern2 = stern.cloneNode(false);
        stern2.setAttribute('transform', 'translate(90,93) scale(1.4)');
        svgElement.appendChild(stern2);
        var stern3 = stern.cloneNode(false);
        stern3.setAttribute('transform', 'translate(235,130) scale(1.4)');
        svgElement.insertBefore(stern3,stern);
        svgElement.removeChild(document.getElementById('go1'));
      }
      function bg(){
        var titel = document.getElementById('titel');
        var svgElement = titel.parentNode;
        var bg = document.createElement('rect');
        bg.setAttribute('x', 15);
        bg.setAttribute('y', 10);
        bg.setAttribute('width', 330);
        bg.setAttribute('height', 220);
        bg.setAttribute('style', 'fill:url(#gra1); stroke:black');
        svgElement.replaceChild(bg,titel);
        svgElement.removeChild(document.getElementById('go2'));
      }
    ]]>
    </script>

<!-- Styles und Gradients -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:24px;
            font-weight:bold;}
    ]]>
    </style>
    <linearGradient id="gra1"
      x1="0" y1="0" x2="0" y2="1">
      <stop offset=".5" stop-color="black" />
      <stop offset="1" stop-color="yellow" />
    </linearGradient>
  </defs>

  <text id="titel" x="20" y="35">Knoten manipulieren</text>
  <g id="go1" onclick="sterne()">
    <rect id="rechteck1" x="20" y="54" width="30" height="20"
      fill="limegreen" stroke="black" />
    <text x="24" y="70" style="font-size:14px;">GO 1</text>
  </g>
  <g id="go2" onclick="bg()">
    <rect id="rechteck2" x="20" y="84" width="30" height="20"
      fill="limegreen" stroke="black" />
    <text x="24" y="100" style="font-size:14px;">GO 2</text>
  </g>
</svg>
      

In der obigen Beispielgrafik sind zwei Funktionen definiert. Die erste Funktion sterne() wird durch den Button go1 ausgelöst, die zweite Funktion bg() durch den Button go2. Beide Funktionen verwenden die, in diesem Unterkapitel, behandelten Methoden, um Elemente bzw. Knoten des SVG Dokuments zu manipulieren.

In der Funktion sterne() wird zuerst mit dem Attribut documentElement das svg-Element ermittelt.
Die Methode createElement(), die auf das document-Objekt angewendet wird, erzeugt daraufhin eine neues polygon-Element. Für diesen neuen Elementknoten werden mit Hilfe der Methode setAttribute() die Attribute points, style und transform gesetzt.
Das so erzeugte und mit Attributen ausgestattete polygon-Element (stern) wird dann durch die Methode appendChild() als Kind-Element des svg-Elements in die Grafik eingefügt.
Um ein zweites neues Element zu erzeugen, wird anschließend durch die Methode cloneNode() der zuvor erzeugte stern dupliziert und das Attribut transform durch die Methode setAttribute() in diesem Duplikat stern2 mit einem anderen Wert neu gesetzt. Dann wird auch dieses neue Element stern2 durch appendChild() als Kind-Element des svg-Elements in der Grafik plaziert. Beachten Sie: Das Objekt stern2 wird nach stern in die Grafik eingefügt und liegt daher über diesem.
Das dritte und letzte neue polygon-Element stern3 wird auf die gleiche Art erzeugt wie stern2. Die Plazierung innerhalb der Grafik wird allerdings mit der Methode insertBefore() vorgenommen. Das Objekt stern3 wird ebenfalls als direktes Kind-Element des svg-Elements eingebunden, aber es wird vor dem Objekt stern plaziert und liegt daher unter diesem.
Die letzte Aktion der Funktion sterne() ist die Entfernung des ersten Buttons go1 durch die Methode removeChild().

In der Funktion bg() wird zuerst das text-Element titel ermittelt, das erstplatzierte Element innerhalb der Grafik.
Daraufhin wird wieder das svg-Element ermittelt. Diesmal allerdings mit Hilfe der Methode getParentNode(), die auf das text-Element titel angewendet wird, und das Eltern-Element diese Elements zurückliefert. Das geht natürlich nur, wenn man weiß, dass das entsprechende Eltern-Element das svg-Element ist (wie in diesem Fall).
Anschließend wird durch die Methode createElement() ein rect-Element (ein Hintergrundrechteck) erzeugt und diesem, durch fünf-maliges Verwenden der Methode setAttribute(), fünf unterschiedliche Attribute zugeordnet.
Dann wird die Methode replaceChild() verwendet, um das text-Element titel aus der Grafik zu entfernen und durch das neue rect-Element bg zu ersetzten. Das neue Element wird dabei an der gleichen Stelle plaziert, an der das entfernte Element vorher gestanden hat (in unserem Beispiel an der ersten Stelle in der Grafik).
Zuletzt wird auch der zweite Button go2 durch die Methode removeChild() aus der Grafik entfernt.

Das folgende Beispiel zeigt, wie man unter Verwendung der Methoden createElement() und createTextNode() einen neuen Text inclusive Textinhalt in ein SVG-Dokument einfügen kann.

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 xmlns="http://www.w3.org/2000/svg" width="360" height="90"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Texte erzeugen</title>
<desc>text-Elemente inclusive Inhalt via Scriptsprache erzeugen</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:Verdana,sans-serif;}
      text.norm {font-family:Verdana,sans-serif; font-size:20px;}
      text.ext {font-size:25px;
                font-weight:bold;
                fill:red;
                stroke:black;
                font-stretch:extra-expanded;}
    ]]></style>
    <script type="text/ecmascript"><![CDATA[
      function text(){
        var svgElement = document.documentElement;
        var tnode = document.createTextNode('thx for the click');
        var t = document.createElement('text');
        t.setAttribute('x','20');
        t.setAttribute('y','32');
        t.setAttribute('class','ext');
        t.setAttribute('id','text1');
        t.appendChild(tnode);
        svgElement.appendChild(t);
      }
    ]]></script>
  </defs>

  <g onclick="text();">
    <rect x="20" y="50" width="85" height="27" />
    <text x="25" y="70" fill="white" class="norm">clickme</text>
  </g>
</svg>
      

Im Beispiel wird zuerst mit der Methode createTextNode() eine neuer Text-Knoten erzeugt, der die eigentlichen Zeichendaten enthält.

Dann wird mit der Methode createElement() ein neues text-Element erzeugt und mit Hilfe der Methode setAttribute() werden einige Attribute für dieses text-Element festgelegt.
Im direkten Anschluss wird dann durch die Methode appendChild() der Text-Knoten als Kind-Element des text-Elements eingefügt.

Zuletzt wird - ebenfalls mit Hilfe der Methode appendChild() - der Knoten des text-Elements als Kind des svg-Elements in das Dokument eingefügt.