获取动态svg内容

Question

我使用snapsvg库从外部svg部件生成svg。这是主要容器：

...
camera = new THREE.PerspectiveCamera(75, screenRatio, 1, 10000 );
camera.position.z = -10; // position.set(0, 0, -10) also not working.
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
...

当我使用检查器查看此元素时，我看到内部附加了新的动态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);