5

在通过图片的缩放版本获取参数后,我正在尝试通过 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">

我将鼠标移到屏幕上,在“投资模式”中看到图片的矩形,但看不到内容。

有人可以告诉我我做错了什么吗?!

我会很感谢你的。

驯兽师

4

2 回答 2

15

您永远不应该对具有前缀的属性使用 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).

于 2011-08-01T18:35:50.643 回答
-3

Try creating the image with null namespace:

var bild = document.createElementNS(null, 'image');
于 2011-08-01T05:37:13.050 回答