adding image namespace in svg through JS still doe

Question

after working out getting the parameter through a scaled version of a picture, I am trying through Javascript adding the picture with the original size parameter in SVG.

Firebug shows me the element, and all the necessary parameter, but with best wishes I am not getting through.

this.svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg','svg');     
var bild = document.createElementNS('http://www.w3.org/2000/svg','image');
var BildURL = this.image[0][0].getAttribute('xlink:href');
var imgX = new Image();
imgX.src = BildURL;

bild.setAttribute("x","60");
bild.setAttribute("y","40");
bild.setAttribute("width",imgX.width);
bild.setAttribute("height",imgX.height);    
bild.setAttribute("id","image12976");
bild.setAttribute("xlink:href",BildURL);
this.svg[0].appendChild(bild);

If i take a look in Firebug, the element fully exists.

<image id="image12976" x="60" y="40" width="300" height="430" xlink:href="img/Akira1.jpg">

I moved the mouse over the sceen, I see the rectangle of the picture in "investing mode", but not the content.

Can somebody here tell me what I did wrong?!

I would kindly thank you.

Tamer

Answer 1

You should never use getAttribute/setAttribute on attributes that have prefixes, see DOM 3 Core for more details on why.

It will work just fine if you use

getAttributeNS('http://www.w3.org/1999/xlink', 'href')

and

setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', your_url_here).

Answer 2

Try creating the image with null namespace:

var bild = document.createElementNS(null, 'image');