【发布时间】：2015-11-30 15:59:36
【问题描述】：
我有一个 svg 元素，我想导出为 SVG 和 PNG。这里已经有一些关于堆栈溢出的方法，例如 this one 和来自 mbostock 的 one。然而，我做到了 像这样：
var $el = '<svg xmlns="http://www.w3.org/2000/svg" height="367" width="780"id="canvas" version="1.1" style="overflow: hidden;">
<circle r="12" style="cursor: move; fill: #4682b4; stroke: #000000; stroke-width: 1.5px;"/></svg>';
var serializer = new XMLSerializer();
var res = serializer.serializeToString($el);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:image/svg+xml;base64,' + btoa(res);
hiddenElement.download = 'export.svg';
hiddenElement.click();
这做了它应该做的，但只在 chrome 中。 Firefox 根本没有反应，Safari 告诉我：
阻止原点为“null”的帧访问原点的帧 “http://localhost:8080”。请求访问的帧有一个协议 在“数据”中，被访问的帧具有“http”协议。 协议必须匹配。
有什么建议吗？谢谢。
【问题讨论】：
-
看来您使用的是 iframe 或对象，不是吗？请提供完整代码。
XMLSerializer().serializeToString()与附加的 DOM 元素一起使用，您正在向它传递一个已经存在的字符串...此外，您不需要编码为 base64，只需使用'data:image/svg+xml; charset=utf8, ' +encodeURIComponent(res)。最后，您的标题谈到了转换为 png。我假设您会将 dataURI 传递给<img>tag，然后将其绘制在画布上。有一些警告（基本上外部资源不会加载）。您可以尝试使用我正在写的这个导出器：github.com/Kaiido/SVG-to-Bitmap
标签： javascript svg export