SVG Tutorial

Um auf Elementknoten eines SVG Dokuments zuzugreifen können Sie folgende Methoden des document-Objekts verwenden:

• getElementById()
  Greift auf das Element mit der entsprechenden ID zu. Diesem Element muß daher mit Hilfe des id-Attributs eine eindeutige ID zugeordnet sein, die der Methode als Parameter übergeben wird.
  Beachten Sie: Wenn Sie, wie in diesem Fall, einer Methode Zeichenketten als Parameter übergeben, müssen Sie diese in einfache oder doppelte Anführungszeichen setzen.
• getElementsByTagName()
  Greift auf alle Elemente des entsprechenden Elementnamens zu und liefert eine Liste dieser Elemente zurück. Der Elementname wird als Parameter übergeben. Die Länge dieser Liste, d.h. die Anzahl der gefundenen Elemente kann durch die Methode getLength() ermittelt werden, die auf eine Element-Liste angewendet, eine Ganzzahl zurückgibt. Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode item() zugreifen. Diese Methode wird ebenfalls auf die Element-Liste angewendet und erwartet als Parameter eine Ganzahl, welche die Position des Elements innerhalb der Liste angibt. Dabei beginnt die Nummerierung innerhalb der Liste bei 0.
• documentElement
  Enthält das svg-Element, also das Wurzelelement der Grafik. Dieses Attribut ist sehr nützlich, wenn Sie Knoten oder Elemente manipulieren wollen.

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="140px" height="62px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Javascript und SVG</title>
  <desc>
    Javascript: Methoden für den Zugriff auf SVG Elemente.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function meldung3(){
        var but = document.getElementById('button');
        var ubut = document.getElementById('usebut');
        var rects = document.getElementsByTagName('rect');
        var zrects = document.getElementsByTagName('rect').getLength();
        var rect = document.getElementsByTagName('rect').item(0);
        alert("document.getElementById('button'):  "
          + but
          + "\ndocument.getElementById('usebut'): - "
          + ubut
          + "\ndocument.getElementsByTagName('rect'): - "
          + rects
          + "\ndocument.getElementsByTagName('rect').getLength(): - "
          + zrects
          + "\ndocument.getElementsByTagName('rect').item(0): - "
          + rect);
      }
    ]]>
    </script>

<!-- Styles und Filter -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:12px;
            font-weight:bold;}
      rect {fill:#33cc33; stroke:black;}
    ]]>
    </style>
    <filter id="filter" x="-.3" y="-.3" width="1.9" height="1.9">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"
        result="out1" />
      <feOffset dx="2" dy="2"
        result="out2" />
      <feSpecularLighting in="out1"
        surfaceScale="5" specularConstant=".75"
        specularExponent="20" lighting-color="#999999">
        <fePointLight x="-100" y="-100" z="100"/>
      </feSpecularLighting>
      <feComposite in2="SourceAlpha" operator="in"
        result="out3"/>
      <feComposite in="SourceGraphic" in2="out3"
        operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
        result="out4"/>
      <feMerge>
        <feMergeNode in="out2"/>
        <feMergeNode in="out4"/>
      </feMerge>
    </filter>

<!-- der Button -->
    <g id="button" style="filter:url(#filter)">
      <rect x="40" y="70" width="80" height="20"
        rx="5" ry="5" />
      <text x="58" y="84">onclick</text>
    </g>
  </defs>

<!-- die Instanz des Buttons -->
  <use id="usebut" xlink:href="#button" x="-10" y="-50"
    onclick="meldung3();" />
</svg>
      

Wenn Sie auf den Button des obigen Beispiels klicken wird ein alert-Fenster angezeigt, in dem Sie die Ausgabe der in diesem Unterkapitel verwendeten Methoden betrachten können.

Rückgabewert der Methode getElementById() auf das SVG Objekt button ist folgender String: object SVGGElement - also ein DOM Objekt, das das verwendete g-Element repräsentiert. Der Rückgabewert der gleichen Methode auf die, durch das use-Element verwendete Instanz des button (usebut), ist daher wie folgt: object SVGUseElement.

Durch die Methode getElementsByTagName() wird danach auf alle verwendeten rect-Elemente zugegriffen. Der Rückgabewert ist eine Liste von Elementknoten: object NodeList. Die Länge dieser Liste wird anschließend durch die Methode getLenght() ermittelt und beträgt 1, da im SVG Dokument nur 1 rect-Element verwendet wird. Zuletzt wird mit der Methode item() das erste Element der Liste ermittelt (Index 0). Der Rückgabewert ist logischerweise: object SVGRectElement.