通过JS在svg中添加图像命名空间仍然不显示图片
在通过图片的缩放版本获取参数之后,我尝试通过 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您永远不应该对具有前缀的属性使用 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)
.尝试使用
null
命名空间创建图像:Try creating the image with
null
namespace: