[英]How to append SVGs to a <div>?
尽管关于如何在 div 中附加 SVG 的 SO 上有很多答案,但我无法让它们中的任何一个为我工作。 可能是因为我以前从未使用过 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 等内容。
我确定有些东西我遗漏了或没有以正确的方式做。 我怎样才能做到这一点?
终于在朋友的帮助下找到了解决方案。
我需要做的就是:
$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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.