Question

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

Answer 1

You can do this in two simple steps:

Use new XMLSerializer().serializeToString(svg); to get a String from your SVG
Use FileSaver.js to actually save the file (https://github.com/koffsyrup/FileSaver.js)

This should work in most cases (except Safari, of course).

Answer 2

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

<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>' />

保存不会自动开始，但是用户可以右键单击→将图像另存为。就像SVG文件中一样，SVG需要具有xmlns="http://www.w3.org/2000/svg"。要嵌入现有的SVG元素，请使用其outerHTML并使用数据URI中的HTML创建img元素，如上所示。

注意事项：

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

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

2 个答案: