javascript - 使用链接 rel ="import"将 SVG 加载到页面中

Question

我试图通过首先将页面包含在 HTML 标题中来将 SVG 文件加载到 HTML 页面中:

<link rel="import" href="/views/Diagram.svg" />

然后执行以下脚本:

var link = document.querySelector('link[rel="import"][href="/views/Diagram.svg"]');
var data = link.import;
document.getElementById("svg-diagram").innerHTML = data;

即使 svg 有效(可以显示)，导入的数据对象包含 parseerror 并且 svg 未添加到页面。我可以使用 ajax 添加 svg，但由于它要加载多次，我更愿意预加载它。我该如何修复代码？

Answer 1

而不是做

document.getElementById("svg-diagram").innerHTML = data;

尝试

document.getElementById("svg-diagram").appendChild(data.documentElement);

因为data.documentElement是一个DOM节点对象，而data是一个document对象。

这是数据对象中的内容

下面是我们要用到的东西

使用 appendChild 而不是 innerHTML，因为 innerHTML 需要一个字符串，而 appendChild 可以使用节点对象