[英]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.