From:  Martin Honnen <>
Date:  02 Aug 2011 22:20:35 Hong Kong Time

Re: adding image namespace in svg through JS still doesn't show me the picture


Tamer Higazi wrote:
> 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 to get the image itself
> being displayed.
> this.svg = document.getElementsByTagNameNS('
> svg','svg');
> var bild = document.createElementNS('
> 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.
> Any ideas to solve it?!

Well you certainly need
   bild.setAttributeNS('', 'xlink:href', 
to create the proper XLINK href attribute.
Furthermore you should be aware that image loading is done 
asynchronously so your attempt to use find out image dimensions with new 
Image() might not work, consider to move the code reading out the 
dimensions in an onload handler e.g.
   var img = new Image();
   img.onload = function() {

     var bild = 

     bild.setAttribute("width", this.width);
     bild.setAttribute("height", this.height);
     bild.setAttributeNS('', 'xlink:href', 
     // now append bild as needed
   img.src = ...