我想通过 jQuery 在 SVG 中添加项目。我可以很好地插入标签,例如<rect />
or<text />
但我不能插入带有标签的图像<image />
。
这个标签会<img />
自动变成,不能在 SVG 中显示图片:http:
//jsfiddle.net/G4mJf/
我怎样才能防止这种情况?如果不可能,是否有另一种方法可以使用 JavaScript/jQuery 在 SVG 中插入图像。
我想通过 jQuery 在 SVG 中添加项目。我可以很好地插入标签,例如<rect />
or<text />
但我不能插入带有标签的图像<image />
。
这个标签会<img />
自动变成,不能在 SVG 中显示图片:http:
//jsfiddle.net/G4mJf/
我怎样才能防止这种情况?如果不可能,是否有另一种方法可以使用 JavaScript/jQuery 在 SVG 中插入图像。
你应该使用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 操作。您可能应该使用Raphael或上面链接中描述的一种 hacky 方法。