svg - 如何将客户端渲染的 svg 图形保存为 svg 文件？

Question

有几个 javascript 库可以在客户端呈现 svg 图像。

例子

JSXGraph

截屏

制作 svg 图像的屏幕截图很容易，但是否可以从客户端将图像下载为 svg 文件？

一种可能的解决方法

在服务器端是可能的，所以也许通过下载页面并修改源代码（添加var svg = new XMLSerializer().serializeToString(board.renderer.svgRoot);和FileSaverJS）可以完成？！没有更简单的解决方案吗？

Answer 1

实际上，new XMLSerializer().serializeToString(board.renderer.svgRoot);返回 SVG 代码。或者，JSXGraph 提供了board.renderer.dumpToDataURI(ignoreTexts)返回 SVG 代码的 base64 编码数据 URI 的方法。如果使用参数 ignoreTexts==false 调用，那些显示为 HTML 元素的 JSXGraph 元素，如一些文本，将被包含在foreignObjectSVG 中的标签中。

所以，如果你想用来board.renderer.dumpToDataURI获取 SVG 源代码，你必须像这样进行 base64 解码：

atob(board.renderer.dumpToDataURI(false).split(',')[1]);

有关工作示例，请参阅https://jsfiddle.net/s9ch1e73/1/ 。

如果您只想从工作示例中复制 SVG 代码，可以将上述代码粘贴到浏览器的 JavaScript 控制台并复制输出。