通过JS在svg中添加图像命名空间仍然没有向我显示图片

Question

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

Firebug向我展示了元素,以及所有必要的参数,但最好的祝福我没有通过.

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,该元素完全存在.

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

我将鼠标移到了方向上,我在"投资模式"中看到了图片的矩形,但不是内容.

有人可以告诉我,我做错了什么？!

我会好心的,谢谢你.

塔梅尔

Answer 1

您永远不应对具有前缀的属性使用getAttribute/setAttribute,有关原因的更多详细信息,请参阅DOM 3 Core.

如果你使用它会很好

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

和

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

Answer 2

尝试使用命名空间创建图像null：

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