通过JS在svg中添加图像命名空间仍然不显示图片

发布于 2024-11-27 14:34:00 字数 901 浏览 0 评论 0原文

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

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

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

我谨向您表示感谢。

驯兽师

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

感悟人生的甜 2024-12-04 14:34:00

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

', 'href') ,它会工作得很好。

如果您使用getAttributeNS('http://www.w3.org/1999/xlink', 'href')

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

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

仅此而已 2024-12-04 14:34:00

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

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

Try creating the image with null namespace:

var bild = document.createElementNS(null, 'image');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文