在js中的div中附加SVG

Question

虽然关于如何在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

终于在朋友的帮助下找到了解决方案.

我需要做的就是:

$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);
});