Connecting Tech Pros Worldwide Help | Site Map

[scripting SVG with JS] creating "image" element

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 23rd, 2005, 07:51 PM
MiW
Guest
 
Posts: n/a
Default [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



  #2  
Old July 23rd, 2005, 07:51 PM
Jim Ley
Guest
 
Posts: n/a
Default 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");
....


  #3  
Old July 23rd, 2005, 07:51 PM
MiW
Guest
 
Posts: n/a
Default 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


 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.