javascript - 如何将 SVG 附加到 <div>？

Question

虽然在 SO 上有很多关于如何在 div 中附加 SVG 的答案，但我无法让它们中的任何一个为我工作。可能是因为我以前从未使用过 SVG。

因此，我在我的节点服务器上创建了一个 SVG，然后创建了一个包含一些其他数据的 JSON 对象以及其中的 SVG

svgFiles.push({
   'file': svgDump, //This holds well created SVG
   'vp': JSON.stringify(viewport),
   'page': pageNum
});

然后将它作为对我的 angularjs 代码的响应发回。

$http({ ... }).then(function callback(resp) { // request to node server
  var svg = resp.data.file;
  var container = document.createElement('div');
  var oldContent = container.innerHTML; // There is going to be an array of objects with SVG data hence i need the 'APPEND' functionality
  // But currently assuming there is only 1 object for demo purpose
  container.innerHTML = oldContent + svg;
})

现在我已将我的 SVG 保存在一个变量中，我希望将它附加到任何 DIV 中都应该有效。

虽然它确实有效，但它都是纯文本，包括@font-face、src 等内容。

我确定我缺少某些东西或没有做正确的事情。我怎样才能做到这一点？

Answer 1

终于在 friend 的帮助下找到了解决办法。

我需要做的就是:

$http({ ... }).then(function callback(resp) { // request to node server
  var svg = resp.data.file;
  var container = document.createElement('div');
  var parser = new DOMParser();
  var doc = parser.parseFromString(svg, "image/svg+xml");
  container.appendChild(doc.documentElement);
});