Question

我是SVG的新手，而不是JavaScript的高级用户。我有一个网页，其中包含由javascript动态呈现的svg内容。在Internet Explorer中，当我右键单击svg内容时，我得到“将图片另存为”选项，我可以将内容保存为png或svg。

如何通过按钮以编程方式执行此操作，并允许用户将png中的内容保存到其计算机上。

Answer 1

根据我的研究，如果不将svg内容发送到您的服务器并让它返回数据以保存为文件下载，则无法执行此操作。

然而，即使使用单一的AJAX风格的请求实现这一点也很棘手，而且解决方案令人费解。其他人已经解释了其他解释这一点的帖子，但我已经完成了相同的答案，但没有一个能够很好地解释它。

以下是对我有用的步骤：

使用JavaScript序列化SVG内容。

var svgString = new XMLSerializer().serializeToString(svgElement);
创建一个隐藏的iframe，其src是提交网址。给它一个id。
创建隐藏的input。将此value的{{1}}设置为序列化的SVG内容。
创建一个表单，其目标是input id，其iframe是提交网址。将action放在input。
提交form。
在您的服务器上，使用任何可用的工具（我不使用.NET，因此您自己在这里......）将SVG文档转换为PNG。将PNG内容发送回客户端，确保使用标题：

form

Content-Type:image/png

浏览器应该在返回的内容上启动文件下载，虽然这取决于浏览器，但我不确定，但有些浏览器可能会选择在新选项卡中打开图像，而不是打开文件下载对话框。

这是一个（不完美的）函数，它将执行AJAX工作（使用JQuery，但你应该明白这个想法）。 Content-Disposition:attachment; filename=mypng.png是序列化的SVG：

data

请注意，此URL对SVG内容进行了URL编码，因此您必须在转换为PNG之前在服务器上对其进行解码。

另请注意，如果您在外部样式表中为SVG定义了样式，则不会序列化它们。出于这个原因，我决定将所有样式内联在元素presentation attributes上。

我希望这会有所帮助。