5

如果我使用 HTML SVG 元素创建图像，我可以将其作为SVG文件下载提供给用户。例如，我可能想要加载 SVG 图像，对其应用一些基本转换，添加一些文本，然后让用户将结果下载为矢量图像。

那可能吗？我一直在用 Canvas 做类似的事情，但一直在努力创建矢量图像。当我今天早上看到 SVG 元素时，我并不知道它们是如此多才多艺，但如果我能做到以上几点，那就太好了。

4

1 回答 1

6

使用数据 URI的简单解决方案：

var svg_root = document.getElementById('your_svg_root_element_here');
var svg_source = svg_root.outerHTML;
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source);
var link = document.getElementById('anchor_element');
link.setAttribute('href', svg_data_uri);

虽然它有效，但在单击链接时，浏览器会停顿几秒钟。

这似乎是最简单的解决方案，应该与所有现代浏览器兼容。但是，它有一些明显的开销。如果其他人知道不同的解决方案（可能使用 blob 或类似的东西），请在此处添加作为另一个答案！

于 2014-09-02T17:36:15.030 回答