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

【问题标题】：What is the best way to serialize SVG from the client DOM?从客户端 DOM 序列化 SVG 的最佳方法是什么？
【发布时间】：2010-09-18 15:19:29
【问题描述】：

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

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

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

【问题讨论】：

标签： php javascript ajax png svg

【解决方案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。

【讨论】：

【解决方案2】：

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

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

【讨论】：