468,545 Members | 1,718 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,545 developers. It's quick & easy.

[scripting SVG with JS] creating "image" element

MiW
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
Jul 23 '05 #1
2 7153
On Mon, 16 May 2005 23:00:18 +0200, "MiW" <mi*@zeus.polsl.gliwice.pl>
wrote:
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.


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");
....
Jul 23 '05 #2
MiW
> you need to learn about createElementNS and setAttributeNS -
namespaces matter


Thank you very much :)
Works perfectly...

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

--
MiW
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by krunkelgarten | last post: by
1 post views Thread by zelnugget | last post: by
2 posts views Thread by Mr.Clean | last post: by
3 posts views Thread by =?Utf-8?B?V2lsbA==?= | last post: by
4 posts views Thread by Ryan Knopp | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.