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

Question

我正在开发交互式的SVG/AJAX界面，用户可以实时创建和重新定位元素。我想支持用户将当前视图导出为PNG图片和/或SVG文档。我希望SVG文档尽可能简单（没有太多嵌套的转换）。是否有任何框架已经支持此功能？

目前，我要求用户使用Ctrl+Alt+PrntScrn技术进行屏幕截图，我不想要求他们安装任何软件/插件。

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

- tstokesbme

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。

- savetheclocktower

Answer 2

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

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

- porneL