通过JS在svg中添加图像命名空间仍然没有显示图片 [英] adding image namespace in svg through JS still doesn't show me the picture

问题描述

在通过缩放版本的图片获取参数后，我正在尝试通过Javascript添加SVG中原始大小参数的图片。

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显示我的元素，和所有必要的参数，但最好的祝福我没有通过。

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

如果我在Firebug中看到，元素完全存在。

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">

我将鼠标移到sceen上，我以投资模式看到图片的矩形，但不是内容。

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?!

我会很感谢你。

Tamer

推荐答案

您不应该在属性上使用getAttribute / setAttribute具有前缀，请参见 DOM 3 Core 更多关于为什么的细节。

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

如果您使用

getAttributeNS（'http://www.w3.org/1999/xlink'，'href'）

和

setAttributeNS（'http://www.w3.org/1999/xlink'，'xlink：href'，your_url_here） 。

这篇关于通过JS在svg中添加图像命名空间仍然没有显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！