Question

我在地图应用程序中使用SVG / VML（通过Raphael JS）设置的网站，其中SVG用于在背景地图图像上显示图形。这在屏幕上非常有效，并且可以使用叠加打印硬拷贝地图。但是，当用户想要将具有SVG覆盖图的地图图像保存到本地.JPG文件时，此设置会分崩离析。

更具体地说，当SVG / VML元素位于图像顶部时，使用大多数浏览器的标准右键单击功能“将图像另存为...”不起作用。在地图上单击鼠标右键，用户可以保存地图图像，但不包含叠加层。右键单击重叠的SVG元素，用户获得的最佳功能是检查元素或保存一些HTML（因浏览器而异）。

所以我的主要问题是;是否可以拍摄图像和SVG元素并将它们（最好是客户端，虽然我可以选择）组合成一个“扁平”图像，.JPG，.PNG或其他，然后可以右键单击并根据要求保存或下载到用户的PC上？

Answer 1

您需要做的是，而不是覆盖JPG和SVG：

这当然意味着您必须能够解释SVG ......

Answer 2

一种可能性是将图像嵌入SVG，然后使用组合图像生成数据URL。以下示例以png格式实现此目的：

 var datauri = c.toDataURL('image/png');

其中c是您格式化的SVG图层。有关更多信息，请参阅svgcanvas.js中的这个开源编辑器http://code.google.com/p/svg-edit/，svg-editor.js文件是如何将SVG导出为png文件的一个很好的示例。起初有点难以理解，但写得非常好。

Answer 3

由于安全限制，我担心你会很难尝试在Canvas元素上渲染SVG（例如我根本无法在Firefox中使用它）。

这是一个想法：