从客户端 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 的有关从 DOM 序列化 XML 的开发人员页面。

Answer 2

Opera 实现了 W3C 的 DOM→XML 序列化器。 在 XML 模式下，innerHTML 在 Gecko 中返回格式正确的 XML。

HTML5 可以使用 toDataURL() 将其内容导出为 PNG 文件，并且可以在画布上绘制任何 元素使用 drawImage()，因此应该可以创建 ，将其绘制在画布上并导出为 data: URL。