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

How to save client side rendered svg graphic as svg file?

有几个 javascript 库可以在客户端渲染 svg 图像。

例子

JSXGraph

截图

制作 svg 图片的屏幕截图很容易,但是是否可以从客户端下载图片作为 svg 文件?

可能的解决方法

On the server side it is possible, so maybe by downloading the page and modifying the source code (add var svg = new XMLSerializer().serializeToString(board.renderer.svgRoot); and FileSaverJS)可以做到吗?!有没有更简单的解决方案?

的确,new XMLSerializer().serializeToString(board.renderer.svgRoot); returns SVG 代码。或者,JSXGraph 提供方法 board.renderer.dumpToDataURI(ignoreTexts),其中 returns SVG 代码的 base64 编码数据 URI。如果使用参数 ignoreTexts==false 调用,那些显示为 HTML 元素的 JSXGraph 元素,如某些文本,将包含在 SVG 中的 foreignObject 标记中。

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

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

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

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