html - 从浏览器下载动态生成的 SVG 文件

标签 html svg

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

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

最佳答案

使用 data 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 或类似的东西),请在此处添加为另一个答案!

关于html - 从浏览器下载动态生成的 SVG 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18428685/

相关文章:

javascript - 每个复选框出现两次

css - 如何在 CSS/SVG 中创建逼真的光泽效果?

javascript - D3 分组条形图 : How to rotate the text of x axis ticks?

html - 我的 .css 文件在我的网页上不起作用

javascript - 单击按钮后使重叠的 div 动画到前面

javascript - ng-model 数据不绑定(bind)选定的 ng-option

html - 使用 HTML 和 CSS 滚动表格

javascript - SVG 嵌入浏览器时会失去 Javascript 交互性

css - 垂直居中多行 SVG 文本

html - React - svg 内的 html 标签