Question

我有一个<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

Answer 1

对于支持SVG-2的浏览器，您只需执行setAttribute("href", url)。

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

实际上，对于setAttributeNS，您还可以将'xlink:href'用作第二个参数或'foo:href'，因为setAttributeNS负责映射到正确的NameSpace并丢弃在:之前出现，但是setAttribute没有出现，因此创建了一种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);

<svg viewBox="0 0 100 100"></svg>

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

1 个答案: