无法通过 jQuery 在 SVG 中添加图像：<image /> 标签变为 <img />答案

【问题标题】：Can not add image inside SVG via jQuery: <image /> tag becomes <img />无法通过 jQuery 在 SVG 中添加图像：<image /> 标签变为 <img />
【发布时间】：2012-05-02 22:53:56
【问题描述】：

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

这个标签自动变成<img />，不能在SVG中显示图片： http://jsfiddle.net/G4mJf/

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

【问题讨论】：

尝试使用我的 jQuery hack [stackoverflow.com/questions/11792754/… [1]: stackoverflow.com/questions/11792754/…

标签： jquery svg

【解决方案1】：

你应该使用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);

【讨论】：

【解决方案2】：

单独的 jQuery 无法正确处理 SVG 操作，as this answer explains。您可能应该使用Raphael，或者上面链接中描述的一种骇人听闻的方法。

【讨论】：