无法通过jQuery在SVG中添加图像:< image/>标签变为< img/> [英] Can not add image inside SVG via jQuery: <image /> tag becomes <img />

问题描述

我想通过jQuery在SVG中添加项目. 我可以很好地插入<rect />或<text />之类的标签，但不能插入带有<image />标签的图像.

I want to add items in an SVG via jQuery. I can well insert tags such as <rect /> or <text /> but I can not insert images with the tag <image />.

此标签自动变为<img />，无法在SVG中显示图像: http://jsfiddle.net/G4mJf/

This tag becomes <img /> automatically, which can not display an image in SVG: http://jsfiddle.net/G4mJf/

如何防止这种情况? 如果不可能，是否还有另一种方法可以使用JavaScript/jQuery在SVG中插入图像.

How can I prevent this? If it is impossible, is there another way to insert images in SVG using JavaScript/jQuery.

推荐答案

您应使用createElementNS():

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(img);

这篇关于无法通过jQuery在SVG中添加图像:< image/>标签变为< img/>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！