从客户端DOM序列化SVG的最佳方法是什么？

Question

我正在开发交互式SVG / AJAX接口，其中元素由用户即时创建和重新定位。我想支持用户将当前视图导出为PNG图像和/或SVG文档的功能。我真的希望SVG文档尽可能简单（没有很多嵌套转换）。是否有任何框架已经支持这个？

我目前要求我的用户使用Ctrl + Alt + PrntScrn技术，我不想让他们安装任何软件/插件。

服务器端代码现在用PHP实现，如果有帮助的话。我已经实现了使用ImageMagick从“原始”文档生成PNG图像的能力（在客户端进行任何修改之前）。

Answer 1

我假设您只需要在支持SVG的浏览器中使用它。

Firefox，Safari和Opera提供非标准XMLSerializer API，因此您可以执行以下操作：

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

从那里，您可以将其发送到服务器并接收PNG作为回报。

这是Mozilla's developer page on serializing XML from the DOM。

Answer 2

Opera已实施W3C's DOM→XML serializer。在XML模式下，innerHTML在Gecko中返回格式良好的XML。

HTML5 <canvas>可以使用toDataURL()将其内容导出为PNG文件，并且可以使用<img>在画布上绘制任何drawImage()元素，因此应该可以创建<img src="data:application/svg+xml,…">，在画布上绘制它并导出为data:网址。