JQuery und SVG

sipoh

Erfahrenes Mitglied
Guten Tag,

ich beginne gerade mit dem Thema SVG und habe dazu gleich eine Frage und hoffe, sie verständlich zu stellen:

Ich habe hard-codiert folgendes Markup, das ein simples Viereck zeichnet:

HTML:
<svg id="canvasBackground" width="640" height="480" x="640" y="480" overflow="visible" style="pointer-events:none">
<rect width="100%" height="100%" x="0" y="0" stroke-width="1" stroke="#000" fill="#FFF" style="pointer-events:none">
</svg>

Nun möchte ich innerhalb des svg-Containers ein weiteres Element (<image>) einbinden. Dies wollte ich mittels JQuery realisieren:

HTML:
$("svg").text("<image ...>");

Nur werden hier leider die Klammern < und > maskiert, sodass das nicht funktioniert. html() funktioniert an dieser Stelle auch nicht. appendTo() bindet "<image ..>" zwar ein, macht aber automatisch aus image img

Kann mir jemand helfen bzw. einen Denkanstoß geben?
 
Habs nicht getestet, aber tut das?

Javascript:
$(document.createElement('image')).appendTo('#canvasBackground');
 
Zurück