如何将生成的 svg 代码保存到客户端计算机中的 .svg 文件中？

Question

我使用 snap.svg 库在我的 asp.net 网络表单页面中使用 snap.svg 生成了一个 svg 元素，方法是加载其他外部 .svg 文件并对其进行操作以获得最后的 svg 元素。一旦所需 svg 对象的组合完成并且生成的 svg 元素在我的页面中显示正常，我需要将其作为 .svg 文件保存在客户端计算机中的用户选择的路径中。关于如何直接进行的任何想法？我的意思是，不将代码发送到服务器，在服务器生成文件，然后将文件下载到客户端机器。

Answer 1

您可以通过两个简单的步骤完成此操作：

使用 new XMLSerializer().serializeToString(svg); 从您的 SVG 中获取字符串
使用FileSaver.js实际保存文件(https://github.com/koffsyrup/FileSaver.js)

这应该适用于大多数情况（当然 Safari 除外）。

Answer 2

您可以在 img 元素的数据 URI 中嵌入内联 SVG 代码：

<img src='data:image/svg+xml;charset=UTF-8,
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>' />

保存不会自动启动，但用户可以right-click → 图像另存为。 SVG 需要有 xmlns="http://www.w3.org/2000/svg"，就像在 SVG 文件中一样。要嵌入现有的 SVG 元素，请获取其 outerHTML 并在数据 URI 中使用该 HTML 创建 img 元素，如上所示。

注意事项：

保存时，浏览器建议的默认文件名类似于download.svg，我认为您无法更改它。
不能在 SVG 中使用单引号 (')，因为它们用于表示数据 URI 的开始和结束位置。
之后你 cannot modify SVG 的内容，因为它在 img 标签中。
SVG 不会使用页面的样式，但使用任何其他方法保存的 SVG 文件也会遇到这个问题。

如何将生成的 svg 代码保存到客户端计算机中的 .svg 文件中？

How can I save my generated svg code to a .svg file in the client machine?

javascript

svg

snap.svg