Elemente dynamisch erzeugen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Der erste Schritt zur dynamischen Anpassung von Grafikelementen ist die Anpassung der vorhandenen Inhalte. Damit ist jetzt nicht eine andere Formatierung oder Positionierung gemeint, sondern bspw. die Änderung von Text. Das erste einfache Beispiel zeigt, wie Sie den Text eines <text>-Tags anpassen und so das aktuelle Datum ausgeben können.

Die Datei enthält einen einzelnen <text>-Tag mit der id text01. Der <text>-Tag enthält ursprünglich den Text Textelement. Dieser soll durch das aktuelle Datum ersetzt werden. Dieses wird in der Funktion init mit der Anweisung var heute= new Date(); erzeugt und der Variablen heute zugewiesen. Um das Datum dem Textelement zuweisen zu können, muss der <text>-Tag zunächst ermittelt werden. Das geschieht hier wieder über die Methode getElementById( ). Im Anschluss wird über die Methode getFirstChild( ) das erste Element des <text>-Tags ermittelt. Dies ist der angegebene Text. Er wird dann mit der Methode setNodeValue( ) neu festgelegt, der neue Wert wird als Parameter übergeben.

<?xml version="1.0" encoding="iso-8859-1"?>
...
<svg width="320" height="300" onload="init(evt)">
  <script type="text/ecmascript">
    <![CDATA[
      var elem;
      var svgdok;
      var eingabe="";
      function init(evt)
      {
        var i=0;
        var svgTag;
        var styleAttr;
        var heute= new Date();
        svgdok=evt.getTarget().getOwnerDocument();
        svgTag=svgdok.getFirstChild();
        elem=svgdok.getElementById("text01");
        elem.getFirstChild().setNodeValue(heute);
      }
   ]]> 
  </script>  
  <text id="text01" x="10" y="40">Textelement</text>
</svg>

Das erzeugte und angezeigte Datum

Abbildung: Das erzeugte und angezeigte Datum.

Wenn Sie SVG-Grafiken zur Navigation einsetzen möchten, bspw. als kleine Sitemap, ist es sinnvoll, Elemente erst zu erzeugen, wenn sie notwendig sind, weil damit zum einen die Ladezeit reduziert wird, zum anderen aber auch die Gestaltung optimiert werden kann und die Anpassung und Erweiterung vereinfacht wird. Das folgende Beispiel zeigt, wie das funktioniert.

Es verwendet eine einfache Navigationsleiste aus Rechtecken und Textelementen. Beim Anklicken der Texte werden die untergeordneten Elemente erzeugt und angezeigt. Wenn das zweite Element angeklickt wird, werden außerdem die erzeugten Elemente vom vorherigen angeklickten Element wieder gelöscht.

Fertige, dynamische Sitemap im Internet Explorer

Abbildung: Fertige, dynamische Sitemap im Internet Explorer.

Zunächst ist dazu folgender SVG-Code notwendig, der die erforderlichen Elemente definiert und deren Formatierung über Stylesheets ermöglicht.

<?xml version="1.0" encoding="iso-8859-1"?> ...
<svg width="440" height="300" onload="init(evt)">
  <style type="text/css">
    <![CDATA[
      text {fill:black;font-family:Arial,Helvetica;font-size:14px;font-stretch:ultra-expanded;font-weight:bold}
      text.unterelement {fill:black;font-family:Arial,Helvetica;font-size:12px;font-stretch:condensed;font-weight:bold}
      rect {fill:none;stroke:none;stroke-width:1px}
      rect.unterelement {fill:url(#linearerVerlauf);stroke:black;stroke-width:1px;display:true}
      a {fill:red;}
    ]]>
  </style>
  <defs>
    <linearGradient id="linearerVerlauf" gradientTransform="rotate(45)">  
      <stop offset="0%" style="stop-color:white"/> 
      <stop offset="100%" style="stop-color:gray"/>  
    </linearGradient>  
  </defs>
  <rect x="10" y="10" width="420" height="30" style="fill:url(#linearerVerlauf);stroke:black;stroke-width:1px"/>
  <g transform="translate(10,10)" id="kontakt" onclick="ausklappen(evt)">
    <rect x="0" y="0" width="120" height="30"/>
    <text x="2px" y="20px">Kontakt</text>
  </g>
  <g transform="translate(130,10)" id="inhalte" onclick="ausklappen(evt)">
    <rect x="0" y="0" width="120" height="30"/>
    <text x="2px" y="20px">Inhalte</text>
  </g>
  <g transform="translate(250,10)" id="projekte" onclick="ausklappen(evt)">
    <rect x="0" y="0" width="120" height="30"/>
    <text x="2px" y="20px">Projekte</text>
  </g>
</svg> 

Wichtig ist dabei, dass Sie die einzelnen Texte und die Rechtecke, in denen sie angeordnet werden, zu Gruppen zusammenfassen und die Gruppen sinnvoll benennen. Wie ist im Prinzip egal. Wenn Sie allerdings nicht die oben gezeigten Namen verwenden, müssen Sie auch den Quellcode anpassen.

Hinweis:
Aufgrund der Komplexität des Beispiels werden nachfolgend nur die wichtigsten Elemente des Codes erläutert.

   

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de