nicht angemeldet
SVG Elemente mit JavaScript hinzufügen
Folgendes Problem:
Ich habe eine HTML Datei in die ich eine SVG Grafik eingebunden habe. Innerhalb der SVG Datei werden verschiedene Elemente gezeichnet und mit der Scriptsprache ecmascript (SVG Scriptsprache) werden verschiedene Funktionen auf diese Elemente angewandt. Letztendlich wird eine JavaScript Funktion in einer extern befindlichen *.js Datei aufgerufen.
Bei einem Klick auf die SVG Grafik wird innerhalb dieser Funktion ein Symbol auf die entsprechende Stelle gesetzt. Dieses Symbol habe ich bisher mit der Path Variablen beschrieben. Dies soll jetzt aber durch ein Bild (gif) ersetzt werden. Das heißt es muss mit Hilfe von:
<image x="10" y="10" height="100" width="50" xlink:href="bild.gif"/>
das Bild eingebunden werden. Die Path Variable wurde mit den Funktionen createElement() und dann mit setAttribute() erzeugt. Für das <image> Element funktioniert diese Variante leider nicht. Wieso? Und gibt es eine ander Möglichkeit? Wenn ja, welche?
Danke und Mfg
-
Hallo,
<image x="10" y="10" height="100" width="50" xlink:href="bild.gif"/>
das Bild eingebunden werden. Die Path Variable wurde mit den Funktionen createElement() und dann mit setAttribute() erzeugt. Für das <image> Element funktioniert diese Variante leider nicht. Wieso? Und gibt es eine ander Möglichkeit? Wenn ja, welche?
Da das xlink:href-Attribut nicht aus dem Standard-SVG-Namensraum stammt, ist hier die Methode setAttributeNS() noetig und zwar in dieser Form:
object.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","neuesbild.gif");
Siehe auch dieses Beispiel.
MfG, Thomas