[scripting SVG with JS] creating "image" element

Hi

I'm making a kind of JavaScript-based library for creating SVG
objects/elements. And I hit the wall...

Every element (rect, circle etc.) can be created using
*.createElement, then *.setAttribute and *.appendChild. Except "image"
element. When 'image' element is created like this, it doesn't display
anything. When I create that element with the same attributes in SVG
code itself, it works perfectly. It works even if I create it with
only 'id' and 'xlink:href' attributes set in SVG and the rest in the
script.

I mean - why this...

<image id="Bitmap" xlink:href="Macius.jpg"/>
[...]
SVGDoc = evt.getTarget().getOwnerDocument();
Bitmap = SVGDoc.getElementById("Bitmap");
Bitmap.setAttribute ("x", 100);
Bitmap.setAttribute ("y", 100);
Bitmap.setAttribute ("width", 128);
Bitmap.setAttribute ("height", 128);

....works and that...

SVGDoc = evt.getTarget().getOwnerDocument();
SVGRoot = SVGDoc.getDocumentElement();
Bitmap = SVGDoc.createElement ("image");
Bitmap.setAttribute ("x", 100);
Bitmap.setAttribute ("y", 100);
Bitmap.setAttribute ("width", 128);
Bitmap.setAttribute ("height", 128);
Bitmap.setAttribute ("xlink:href", "Macius.jpg");
SVGRoot.appendChild (Bitmap);

.... doesn't ???

--
thanks
MiW

re: [scripting SVG with JS] creating "image" element

On Mon, 16 May 2005 23:00:18 +0200, "MiW" <miw@zeus.polsl.gliwice.pl>
wrote:
[color=blue]
>Every element (rect, circle etc.) can be created using
>*.createElement, then *.setAttribute and *.appendChild. Except "image"
>element. When 'image' element is created like this, it doesn't display
>anything. When I create that element with the same attributes in SVG
>code itself, it works perfectly. It works even if I create it with
>only 'id' and 'xlink:href' attributes set in SVG and the rest in the
>script.[/color]

you need to learn about createElementNS and setAttributeNS -
namespaces matter

svgNS="http://www.w3.org/2000/svg";
xlinkNS="http://www.w3.org/1999/xlink";

img=SVGDoc.createElementNS(svgNS,"image");
.....
img.setAttributeNS(xlinkNS,"href","marcus.jpg");
....

re: [scripting SVG with JS] creating "image" element

> you need to learn about createElementNS and setAttributeNS -[color=blue]
> namespaces matter
>[/color]

Thank you very much :)
Works perfectly...

When it's finished, I'll show you the effects :)

--
MiW