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

Question

我想通过jQuery在SVG中添加项目。 我可以插入<rect />或<text />等标签，但我无法插入带有<image />标签的图片。

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

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

Answer 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);

Answer 2

单凭jQuery无法正确处理SVG操作as this answer explains。你可能应该使用Raphael，或上面链接中描述的一种hacky方法。