正在尝试在SVG标记中显示图像URL

Attempting to display an image URL within an SVG tag

本文关键字：显示 显示图 URL 图像 SVG      更新时间：2024-07-01

我使用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（）

这是一个演示

由于是动态设置图像，因此必须使用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');
相关文章：