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

What is the best way to serialize SVG from the client DOM?

本文关键字：最佳 方式 是什么 SVG 客户端 DOM 序列化      更新时间：2023-09-26

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

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

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

我假设您只需要在支持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的开发人员页面。

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

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

相关文章：