Question

我正在使用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);

不幸的是，我上面代码中的图片网址没有显示。

Answer 1

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

Answer 2

由于您要动态设置图片，因此必须使用 domElement.setAttributeNS() 。通常，SVG本机属性不共享SVG名称空间，这就是为什么可以使用 domElement.setAttribute() 设置大小和位置属性，但是xlink:href属性是一个例外，所以我们需要明确设置命名空间。

svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');

试图在SVG标记内显示图像URL

2 个答案: