在 JS 中创建的 SVG <image> 元素不显示答案

【问题标题】：SVG <image> element created in JS does not display在 JS 中创建的 SVG <image> 元素不显示
【发布时间】：2019-11-30 22:21:51
【问题描述】：

我有一个<svg> 元素（带有viewBox 集），并在其上附加了一个以编程方式构造的<image> 元素，如下所示：

const img=document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('width','100');
img.setAttribute('height','100');
img.setAttribute('xlink:href','data:image/png;base64,iVBORw0KGgoAAA'+
'ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4'+
'//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU'+
'5ErkJggg==');
document.querySelector('svg').appendChild(img);

它存在于 SVG 中，但没有显示任何内容。但是，当我调用 img.outerHTML = img.outerHTML; 以从其文本表示中重新创建它时，它开始正确显示。

任何人都可以帮助我了解发生了什么？应该如何在 JS 中创建元素才能正常显示？

JSFiddle

【问题讨论】：

SVG标签本身不需要宽高吗？
不，它不会改变任何东西，你可以很容易地在小提琴中看到它。如果没有尺寸，SVG 只占主体的 100%，但它肯定存在。
没有其他解决方案。

标签： javascript html image svg

【解决方案1】：

对于支持 SVG-2 的浏览器，您可以简单地使用 setAttribute("href", url)。

但是，在 SVG-1.x 中，您必须使用 setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);

实际上使用setAttributeNS，您也可以使用'xlink:href' 作为第二个参数或'foo:href'，因为setAttributeNS 负责映射到正确的命名空间并丢弃: 之前的内容，但是@ 987654328@ 没有，因此会创建一种 null:xlink:href 属性，它不会映射到浏览器已知的任何内容，因此会失败。

const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const img =  document.createElementNS('http://www.w3.org/2000/svg','image');

img.setAttribute('width','100');
img.setAttribute('height','100');

img.setAttribute('href', url); // SVG-2
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url); // SVG-1.x

document.querySelector('svg').appendChild(img);

&lt;svg viewBox="0 0 100 100"&gt;&lt;/svg&gt;

【讨论】：