獲取動態svg內容

Question

我使用snapsvg庫從外部svg部件生成svg。這裏是主容器：

<svg id="mainContent"></svg> 

當我看着這個元素使用檢查我看到裏面追加新的動態SVG元素。

我怎樣才能得到這個SVG全動態內容將它保存到文件？

Answer 1

必須嘗試只是簡單地查詢它像正常的DOM元素？

var content = document.querySelector('#mainContent').outerHTML 

下載部分，你可以使用saveAs功能現代的瀏覽器

var blob = new Blob([content], {type: "text/plain;charset=utf-8"}); 
saveAs(blob, "download.svg"); 

看到https://github.com/eligrey/FileSaver.js/

Answer 2

下面的代碼片段可以幫助ü下載SVG文件。

function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href','data:text/plain;charset=utf-8,' + encodeURIComponent('<svg>'+text+'</svg>')); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } download("samplesvg.svg",document.getElementById('mainContent').innerHTML);