使用link rel =＆＃34; import＆＃34;将SVG加载到页面中

Question

我正在尝试将SVG文件加载到HTML页面中，首先在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是文档对象。

这是数据对象中的内容

这就是我们要利用的

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