Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 16

16.6 Methoden fuer den Zugriff auf Attribute

Für einen direkten Zugriff auf Attribute und Eigenschaften stehen folgende Methoden zur Verfügung:

  • getAttributes()
    Diese Methode liefert eine Liste der Attributknoten eines Elementknotens zurück. Die Länge dieser Liste, d.h. die Anzahl der gefundenen Attribute kann durch die Methode getLength() ermittelt werden. Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode item() zugreifen. Siehe auch getElementsByTagName().
  • getAttribute()
    Diese Methode liefert den Wert eines bestimmten Attributknotens zurück. Dabei wird der Attributname als Parameter übergeben.
  • getStyle()
    Rückgabewerte dieser Methode ist eine Liste, die alle Style-Eigenschaften enthält, die durch das Attribut style für ein Element definiert sind. Die Länge dieser Liste, d.h. die Anzahl der gefundenen Attribute kann durch die Methode getLength() ermittelt werden. Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode item() zugreifen. Siehe auch getElementsByTagName().
    Beachten Sie: Wenn die Style-Eigenschaften in einem externen Style-Sheet definiert sind, ist überhaupt kein Zugriff auf die Eigenschaften möglich. Wenn die Style-Eigenschaften mit Hilfe des style-Elements im defs-Bereich des SVG Dokuments definiert sind, ist der lesende Zugriff mit getStyle() nicht möglich. In diesem Fall müssen Sie den Textknoten des style-Elements auslesen.
  • getPropertyValue()
    Lieferte den Wert einer bestimmten Eigenschaft zurück, die innerhalb der Liste aller Style-Eigenschaften gesetzt ist. Daher ist diese Methode auf den Rückgabewert der Methode getStyle() anzuwenden. Erwartet den Namen der Eigenschaft (Zeichenkette) als Parameter.
  • getCssText()
    Liefert die komplette Liste aller Style-Eigenschaften bzw. den gesamten Wert (die gesamte Zeichenkette) des style-Attributs zurück. Diese Methode ist ebenfalls auf den Rückgabewert der Methode getStyle() anzuwenden.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?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="440px" height="80x"
     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
    Attribute und Eigenschaften.</desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function attr(){
        var document = evt.getTarget().getOwnerDocument();
        var rechteck = document.getElementById('rechteck');
        var rect_attr = rechteck.getAttributes();
        var rect_attr_anz = rechteck.getAttributes().getLength();
        alert("Alle Attribute des Rechtecks: " + rect_attr +
              "\nAnzahl aller Attribute: " + rect_attr_anz);
        for(var i = 0; i < rect_attr_anz; i++){
          alert("Attribut" + i + " : " +
                rect_attr.item(i).getNodeName() +
                " = " +
                rect_attr.item(i).getNodeValue() +
                "\n");
        }
      }
      function attr2(){
        var document = evt.getTarget().getOwnerDocument();
        var rechteck = document.getElementById('rechteck');
        var r_id = rechteck.getAttribute('id');
        var r_x = rechteck.getAttribute('x');
        var r_y = rechteck.getAttribute('y');
        var r_width = rechteck.getAttribute('width');
        var r_height = rechteck.getAttribute('height');
        var r_rx = rechteck.getAttribute('rx');
        var r_ry = rechteck.getAttribute('ry');
        var r_style = rechteck.getAttribute('style');
        alert("Alle Attribute des Rechtecks\n" +
              "id = " + r_id + "\n" +
              "x = " + r_x + "\n" +
              "y = " + r_y + "\n" +
              "width = " + r_width + "\n" +
              "height = " + r_height + "\n" +
              "rx = " + r_rx + "\n" +
              "ry = " + r_ry + "\n" +
              "style = " + r_style);
      }
      function prop1(){
        var document = evt.getTarget().getOwnerDocument();
        var rechteck = document.getElementById('rechteck');
        var r_prop = rechteck.getStyle();
        var r_prop_anz = rechteck.getStyle().getLength();
        alert("Alle Eigenschaften des Rechtecks: " + r_prop +
              "\nAnzahl aller Eigenschaften: " + r_prop_anz);
        for(var i = 0; i < r_prop_anz; i++){
          var prop_name = rechteck.getStyle().item(i);
          var prop_wert = rechteck.getStyle().getPropertyValue(prop_name);
          alert("Eigenschaft" + i + " : " +
                prop_name +
                " = " +
                prop_wert);
        }
      }
      function prop2(){
        var document = evt.getTarget().getOwnerDocument();
        var rechteck = document.getElementById('rechteck');
        var r_csstext = rechteck.getStyle().getCssText();
        alert("Der Wert des style-Attributs innerhalb des Rechtecks:\n\t"
              + r_csstext);
      }
    ]]>
    </script>

<!-- Styles und Filter -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:12px;
            font-weight:bold;}
      text.normal {font-weight:normal;font-size:14px;}
    ]]>
    </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 id="rechteck" x="40" y="70" width="80" height="20"
        rx="5" ry="5"
        style="fill:#33cc33; stroke:black;" />
      <text id="txt" x="58" y="84">onclick</text>
    </g>
  </defs>

<!-- die Instanzen des Buttons -->
  <use id="usebut1" xlink:href="#button" x="-10" y="-50"
    onclick="attr();" />
  <use id="usebut1" xlink:href="#button" x="90" y="-50"
    onclick="attr2();" />
  <use id="usebut1" xlink:href="#button" x="190" y="-50"
    onclick="prop1();" />
  <use id="usebut1" xlink:href="#button" x="290" y="-50"
    onclick="prop2();" />

<!-- Hilfstexte -->
  <text x="35" y="65" class="normal">Attribute 1</text>
  <text x="135" y="65" class="normal">Attribute 2</text>
  <text x="235" y="65" class="normal">Propertys 1</text>
  <text x="335" y="65" class="normal">Propertys 2</text>
</svg>
      

Im obigen Beispiel sind vier Javascript-Funktionen definiert, die jeweils durch einen Klick auf den zugehörigen Button ausgelöst werden. Innerhalb dieser Funktionen wird mit Hilfe der in diesem Unterkapitel vorgestellten Methoden, auf die Attribute und Eigenschaften des rect-Elements mit der ID rechteck zugegriffen.
Dazu wird in der zweiten Zeile jeder Funktion mit Hilfe der Methode getElementById() das Objekt rechteck erzeugt, welches das entsprechende rect-Element repräsentiert.

In der ersten Funktion attr() wird die Methode getAttributes() verwendet, die eine Liste aller Attribute (object NamedNodeMap) zurückliefert. Danach wird die Länge dieser Liste, d.h. die Anzahl der Elemente, mit getLength() ermittelt. Die beiden Rückgabewerte werden darauf in einem alert-Fenster angezeigt.
Hiernach wird eine for-Schleife verwendet, für die als Endwert die Anzahl der Elemente festgelegt ist. In jedem der (daraus resultierenden) acht Schleifendurchläufe wird zuerst durch Verwendung der Methode item() und der Methode getNodeName() der Name des jeweiligen Attributs, und dann ebenfalls durch die Methode item() und der Methode getNodeValue() der jeweilige Wert zu diesem Attribut ermittelt. Beide Rückgabewerte werden in jedem Schleifendurchlauf innerhalb eines alert-Fensters angezeigt.

In der zweiten Funktion attr2() wird mit Hilfe der Methode getAttribut() der Wert jedes einzelnen Attributs ermittelt. Alle Werte werden dann, zusammen mit den Attributnamen in einem alert-Fenster ausgegeben.

Innerhalb der dritten Funktion prop1() wird durch die Methode getStyle() zuerst eine Liste mit allen Style-Eigenschaften erzeugt (object CSSStyleDeclaration). Hiernach wird mit getLength() die Anzahl der Style-Eigenschaften in dieser Liste ermittelt. Beide Werte werden in einem alert-Fenster ausgegeben.
Darauf wird wieder eine for-Schleife verwendet, um in jedem Schleifendurchlauf durch die Methode item() den Namen der Eigenschaft und, ebenfalls mit der Methode item(), aber zusätzlich mit der Methode getPropertyValue(), die als Parameter den jeweiligen Eigenschaftsnamen verwendet, den Wert dieser Eigenschaft zu ermitteln. Beide Rückgabewerte werden in jedem Schleifendurchlauf innerhalb eines alert-Fensters angezeigt.

In der vierten Funktion prop2() ermittelt die Methode getCssText() den Wert des Attributs style, d.h. die gesamte CSS-Zeichenkette. Dieser Wert wird dann in einem alert-Fenster ausgegeben.




index  |  Kapitel 16  |  16.5  <<  | 16.6 |  >>  16.7   Methoden fuer den Zugriff auf Text