javascript - 尝试在SVG标签中显示图像URL

我正在为此使用Codepen.io，即：

HTML：

<h1>SVG Image Example</h1>

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
</svg>

JS：

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttribute('height','50');
svgimg.setAttribute('width','50');
svgimg.setAttribute('xlink:href', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');
svgimg.setAttribute('x','50');
svgimg.setAttribute('y','50');
$('svg').append(svgimg);

不幸的是，上面代码中的图像URL无法显示。

最佳答案

SVG本机属性（不包括xlink：href）不共享SVG名称空间。

你应该这样使用

svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href' ,'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg');

而不是svgimg.setAttribute（）

这是一个DEMO HERE