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

SVG Tutorial

  svg tutorial index  |  Kapitel 16   

16.8 Methoden zur Manipulation von AttributenEigenschaften

Um SVG Inhalte dynamisch verändern zu können, müssen Sie in der Regel zuerst auf Knoten zugreifen. Nachdem also in den letzten vier Kapiteln Methoden für den Zugriff auf verschiedene Knoten behandelt wurden, folgt in den nächsten drei Kapiteln die eigentlich interessantere Thematik: die Manipulation von Inhalten, d.h. das dynamische Ändern von Elementen, Attributen, Werten oder Textdaten.

Es ist natürlich generell möglich, Änderungen durch die Methoden für den Zugriff zu realisieren (den Objekt-Eigenschaften neue Werte zuweisen). Allerdings gibt es spezielle Funktionen zur Änderung, die bevorzugt zu verwenden sind. Die folgenden drei Kapitel stellen diese Methoden kurz vor.

Die folgenden Methoden erlauben die Manipulation von Attributen und Eigenschaften. Sie sind daher auf Elementknoten anzuwenden, da diese Attribute oder Eigenschaften besitzen können.

  • setAttribute()
    Setzt ein Attribut für ein Elementknoten. Erwartet zwei Parameter: den Namen des Attributs (Zeichenkette) und den entsprechenden Wert (Zahl oder Zeichenkette).
  • removeAttribute()
    Entfernt ein Attribut aus einem Elementknoten. Erwartet als Parameter den Namen des Attributs (Zeichenkette).
  • setProperty()
    Setzt ein neues Eigeschaft:Wert-Pärchen innerhalb der Liste aller Style-Eigenschaften. Erwartet zwei Parameter: den Namen der Eigenschaft (Zeichenkette) und den entsprechenden Wert (Zahl oder Zeichenkette).
  • removeProperty()
    Entfert ein Eigenschaft:Wert-Pärchen aus der Liste aller Style-Eigenschaften. Erwartet den Namen der Eigenschaft als Parameter.

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="320px" height="210px"
     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 Attributen
    und/oder Eigenschaften.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function ohne(){
        var stern_style = document.getElementById('stern').style;
        stern_style.setProperty('fill','none');
      }
      function gelb(){
        var stern_style = document.getElementById('stern').style;
        stern_style.setProperty('fill','yellow');
      }
      function gruen(){
        var stern_style = document.getElementById('stern').style;
        stern_style.setProperty('fill','limegreen');
      }
      function schwatt(){
        var stern_style = document.getElementById('stern').style;
        stern_style.removeProperty('fill');
      }
      function filter(){
        var stern = document.getElementById('stern');
        if (stern.getAttribute('filter') == 'url(#filter)'){
          stern.removeAttribute('filter');
        } else {
          stern.setAttribute('filter','url(#filter)');
        }
      }
    ]]>
    </script>

<!-- ein Filter -->
    <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>
  </defs>

<!-- ein Stern: Ziel der Dynamik -->
  <polygon id="stern" transform="translate(20,20) scale(4)"
    points="0 20, 15 15, 20 0, 25 15, 40 20, 25 25, 20 40, 15 25"
    style="stroke:black;" />

<!-- 4 Kreise und eine Gruppe als Buttons -->
  <circle cx="240" cy="30" r="10"
    style="fill:white; stroke:black;"
    onclick="ohne()" />
  <circle cx="240" cy="60" r="10"
    style="fill:limegreen; stroke:black;"
    onclick="gruen()" />
  <circle cx="240" cy="90" r="10"
    style="fill:yellow; stroke:black;"
    onclick="gelb()" />
  <circle cx="240" cy="120" r="10"
    style="stroke:black;"
    onclick="schwatt()" />
  <g onclick="filter()">
    <rect x="230" y="144" width="56" height="20"
      style="fill:none; stroke:black;" />
    <text id="txt" x="235" y="160"
      style="font-family:Verdana; font-size:16px; font-weight:bold;">
      Filter
    </text>
  </g>

<!-- Hilfstexte -->
  <text x="235" dy="176"
    style="font-size:11px; font-weight:bold;">
    AN/AUS
  </text>
  <text x="265" y="27"
    style="font-size:11px; font-weight:bold; font-stretch:ultra-expanded;"
    writing-mode="tb">
    Farb-Wahl
  </text>
</svg>
      

Die obige Beispielgrafik zeigt einen schwarzen Stern (ein polygon-Element), neben dem vier farbige Kreise und der umrahmte Text Filter platziert sind. Diese fünf Elemente bzw. Objekte dienen als Buttons für die jeweils entsprechenden Funktion, der insgesamt fünf definierten Funktionen. Jede Funktion verändert die Eigenschaften oder Attribute des polygon-Elements. So können Sie dem Stern verschiedenen Farben und einen Filter zuordnen.

In der ersten Funktion ohne() wird durch die Methoden getElementById() und getStyle() zuerst die Liste aller Style-Eigenschaften des polygon-Elements ermittelt. Auf diese Liste, die ja ein Objekt darstellt, wird dann die Methode setProperty() angewendet, die als Parameter zuerst den Namen der zu verändernden Eigenschaft (fill) und dann den gewünschten neuen Wert für diese Eigenschaft (none) enthält. So ist dem Stern nach Klick auf den ersten Kreis (ohne Füllfarbe) keine Füllfarbe mehr zugeordnet.

Die folgenden Funktionen gelb() und gruen() sind genauso aufgebaut, wie die zuerst definierte Funktion ohne(). Die Füllfarbe des polygon-Elements ändert sich dadurch, dass der Eigenschaft fill mit Hilfe der Methode setProperty() ein neuer Wert zugewiesen wird. In diesem Fall Gelb bzw. Grün.

Bei der Funktion schwatt() wird zur Abwechslung ;-) die Methode removeProperty() verwendet, um den Stern mit der Farbe schwarz zu füllen. Diese Methode entfernt die Eigenschaft fill aus der Liste der Style-Definitionen für das polygon-Element. Da der voreingestellte Wert von fill (black) verwendet wird, wenn diese Eigenschaft (oder das Attribut fill) nicht gesetzt ist, stellt sich der Stern nach dieser Funktion in schwarz dar.

In der letzte Funktion filter() wird einen if-Entscheidung verwendet, um dem polygon-Element entweder einen definierten Filter zuzuordnen, oder den bereits definierten Filter wieder aus dem Element zu entfernen.
In der Bedingung von if wird daher mit der Methode getAttribute() überprüft, ob dem Attribut filter innerhalb des polygon-Elements der Wert url(#filter) zugeordnet ist.
Im Ja-Fall wird das Attribut filter durch die Methode removeAttribute() entfernt, ansonsten wird es durch die Methode setAttribute() mit dem Wert url(#filter) im polygon-Element gesetzt.
So können Sie mit Klick auf den Filter-Button den Filtereffekt ein- und ausschalten.




index  |  Kapitel 16  |  16.7  <<  | 16.8 |  >>  16.9   Methoden zur Manipulation von Elementen/Knoten