javascript - 获取动态 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/