Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 81
Zur Übersicht

81. SVG DOMinant – Zugriff auf das SVG-DOM (30.01.2002)

Dieser Beitrag soll einige weitere Anregungen zum dynamischen Verändern von Elementen und Attributen innerhalb von SVG-Dokumenten geben. Ausgangspunkt ist eine einfache Grafik, die einen roten Kreis mit schwarzem Rand zeigt:


      <circle id="kreis" cx="100" cy="100" r="49" style="fill: #FF0000;
        stroke: #000000; stroke-width: 2px" onclick="DOMinant(evt)"/>
Die JavaScript-Funktion DOMinant() enthält Code, der einerseits beim Klicken auf den Kreis dessen Radius und Farbe verändert, also den Attributwert von r und die Style-Eigenschaft fill. Andererseits wird ein neues Element rect (Rechteck) mit Attributen, zugehörigen Werten und einer zusätzlichen Animation (Element animation als Kindelement von rect) erstellt. Zum Einsatz kommen dabei W3C-DOM-Methoden wie u. a. getElementById(), createElement(), setAttribute() und appendChild(). Ihr Aufruf ist im folgenden Code dokumentiert.


         function DOMinant(evt)
         {
           var svgdoc, svgroot, objekt, recneu, anineu;
       
           // Dokumenteninstanz
           svgdoc=evt.getTarget().getOwnerDocument();
           // Wurzelelement
           svgroot=svgdoc.getDocumentElement();
           // oder: svgroot=document.documentElement;
       
           // Neue Eigenschaften fuer Kreis setzen
       
           // getElementById()
           objekt=svgdoc.getElementById("kreis");
           // XML-Attribut setzen: setAttribute()
           objekt.setAttribute("r","70");
           // CSS-Attribut setzen: getStyle().setProperty()
           objekt.getStyle().setProperty("fill","#FFFFCC");
       
       
           // Neues Element rect erstellen und
           // mit Attributen sowie Werten versehen
       
           // createElement()
           recneu=svgdoc.createElement("rect");
       
           // setAttribute()
           recneu.setAttribute("x","200");
           recneu.setAttribute("y","50");
           recneu.setAttribute("width","0");
           recneu.setAttribute("height","100");
           recneu.setAttribute("style","fill: #009900;
             stroke: #000000; stroke-width: 1px");
       
       
           // Neues Element animation erstellen und
           // mit Attributen sowie Werten versehen

           // createElement()       
           anineu=svgdoc.createElement("animate");

           // setAttribute()
           anineu.setAttribute("attributeName","width");
           anineu.setAttribute("attributeType","XML");
           anineu.setAttribute("begin","1s");
           anineu.setAttribute("dur","10s");
           anineu.setAttribute("fill","freeze");
           anineu.setAttribute("from","0");
           anineu.setAttribute("to","300");
       
       
           // die neuen Elemente in den Dokumentenbaum einhaengen
       
           // appendChild()
           svgroot.appendChild(recneu).appendChild(anineu);
         }
Browserdarstellung der SVG-Grafik mit DOM-Funktion



Im Beispiel wird diese Funktion über den Event-Handler onclick beim Anklicken des Kreises aktiviert. Darüber hinaus ist im SVG-Dokument eine weitere Funktion mit dem Namen DOMInfos() enthalten. Diese hat die Aufgabe, einige Informationen zu den enthaltenen Elementen und Attributen anzuzeigen. Interessant ist vor allem die Anzeige der Änderungen im Dokumentenbaum nach dem Anklicken des roten Kreises. In einer Alert-Box werden die ermittelten Ergebnisse ausgegeben. Aktiviert wird diese Funktion über den Textlink unterhalb des Kreises bzw. Rechteckes. Im Code sind die verwendeten DOM-Methoden wiederum kommentiert.