5

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

SmileMZ
  • 459
  • 4
  • 12

2 Answers2

15

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).

Erik Dahlström
  • 54,515
  • 11
  • 110
  • 127
  • exactly that was it..... !!!! Yesterday I figured that out either. But thank you very much! – SmileMZ Aug 01 '11 at 23:26
  • Wrong. `getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href')` doesn't work. `getAttribute("xlink:href")` works. https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagNameNS – Green Sep 13 '12 at 23:14
  • @Green: please back that up with an example. Mixing namespaced attributes with non-namespace-aware DOM methods is not advisable. – Erik Dahlström Sep 14 '12 at 08:11
  • @ErikDahlström, please see my question http://stackoverflow.com/questions/12422668/getting-xlinkhref-attribute-of-the-svg-image-element-dynamically-using-js-i – Green Sep 14 '12 at 10:28
  • It's one of those DOM gotchas, in getAttributeNS the attribute mustn't have the prefix (xlink:href), but in setAttributeNS it should (for serialization). I've updated the answer (and it works in all browsers including chrome See http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-ElGetAttrNS. – Erik Dahlström Sep 16 '12 at 06:18
  • @SmileMZ, why don't you accept the answer, if it solved your issue – Eliran Malka Jul 30 '13 at 09:48
-3

Try creating the image with null namespace:

var bild = document.createElementNS(null, 'image');
Spadar Shut
  • 13,513
  • 5
  • 39
  • 51