javascript - adding image namespace in svg through JS still doesn't show me the picture - Stack Overflow

admin管理员组

文章数量:1277301

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('','svg');     
var bild = document.createElementNS('','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

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/2000/svg','svg');     
var bild = document.createElementNS('http://www.w3/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

• javascript
• dom
• svg
• client-side
• client-side-scripting

Share Improve this question Follow edited Aug 1, 2011 at 1:12 SmileMZ asked Aug 1, 2011 at 1:05 SmileMZSmileMZ 54755 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/1999/xlink', 'href')

and

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

Try creating the image with null namespace:

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

本文标签： javascriptadding image namespace in svg through JS still doesn39t show me the pictureStack Overflow