Elemente erzeugen

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

Um die Elemente zu erzeugen, müssen Sie nur die Werte des entsprechenden Arrays durchlaufen. Dazu verwendet das Beispiel eine for-Schleife. Innerhalb der Schleife wird dann für jedes Element des Arrays ein Rechteck, ein Textelement mit Link und eine waagerechte Linie erzeugt, die zur Verbindung der Unterelemente verwendet wird.

Hinweis:
Die Variablen ABSTAND, BREITE, HOEHE, hoehe und anfang sind Variablen, die teils auf Skriptebene, teils auch in der Funktion ausklappen definiert und initialisiert werden. Sie bestimmen die Abstände, Größen und Positionen der untergeordneten Elemente.

Zunächst wird der Variablen neuesElem ein neues Rechteck zugewiesen, das mit der Methode createElement erzeugt wird. Um ein Rechteck zu erstellen, übergeben Sie einfach den Namen des <rect>-Tags an die Methode. Anschließend können Sie die setAttribute-Methode verwenden, um die benötigten Attribute zu setzen. Wichtig sind vor allem die Attribute x und y. Der x-Wert berechnet sich aus dem doppelten Wert von ABSTAND, die vertikale Position ergibt sich aus der Höhe der Elemente, zuzüglich dem Abstand. Mit der Methode appendChild können Sie dann das neue Element an das übergeordnete Element in der Variablen elem anhängen. Anschließend wird die waagerechte Linie auf ähnliche Weise erstellt, indem ein <path>-Tag erzeugt wird.

for (i=0;i<werte.length;i++)
{
  //Kasten
  neuesElem=svgdok.createElement("rect");  
  neuesElem.setAttribute("x",ABSTAND*2);
  neuesElem.setAttribute("y",hoehe+ABSTAND);
  neuesElem.setAttribute("width",BREITE);
  neuesElem.setAttribute("height",HOEHE);
  neuesElem.setAttribute("class","unterelement");
  neuesElem=elem.appendChild(neuesElem);
  //Linie waagerecht
  neuesElem=svgdok.createElement("path");
  neuesElem.setAttribute("d","M"+ABSTAND+" "+parseInt(hoehe+(HOEHE/2)+ABSTAND)+" h+"+ABSTAND);
  neuesElem.setAttribute("style","fill:none;stroke:black;stroke-width:1px");
  neuesElem=elem.appendChild(neuesElem);

Um die Textelemente zu erstellen, wird zunächst ein <a>-Tag für den Hyperlink erzeugt. Allerdings können Sie das Attribut xlink:href nicht mit der setAttribute-Methode setzen. Für Attribute, die einen XML-Namensraum verwenden, müssen Sie die Methode setAttributeNS einsetzen. Der Methode übergeben Sie zunächst den Namensraum in Form einer URL. Da es sich hier um einen xlink-Namensraum handelt, ist der Wert "http://www.w3.org/1999/xlink" notwendig. Als zweiten Parameter übergeben Sie das Element, hier href, und dann den Wert, der in diesem Fall dem Array links entnommen wird.

//Texte
neuesAElem=svgdok.createElement("a");
neuesAElem.setAttributeNS(

Im Anschluss wird das <text>-Element erzeugt, das den Text für den Hyperlink definiert. Nachdem dessen Attribute gesetzt wurden, wird mit der Methode createTextNode der Inhalt des <text>-Tags erzeugt. Damit dieser Text auch in das <text>-Element integriert wird, müssen Sie es danach mit appendChild dem Textelement anhängen und anschließend noch das Textelement in den <a>-Tag einfügen. Das geschieht ebenfalls mit der appendChild( )-Methode. Zum Schluss wird dann mit der dritten appendChild( )-Methode noch der <a>-Tag in die Gruppe eingefügt. Wichtig ist natürlich, dass Sie den neuen Wert für die Variable hoehe berechnen, damit das nächste Element darunter angezeigt wird.

  neuesElem=svgdok.createElement("text");  
  neuesElem.setAttribute("x",ABSTAND*2.5);
  neuesElem.setAttribute("y",hoehe+(ABSTAND*2.8));
  neuesElem.setAttribute("class","unterelement");
  neuesTElem=svgdok.createTextNode(werte[i]);
  neuesElem.appendChild(neuesTElem);
  neuesAElem.appendChild(neuesElem);
  elem.appendChild(neuesAElem);  
  hoehe=hoehe+ABSTAND+HOEHE;
  }
  //Linie vertikal
  ...
}

   

<< 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