如何解决SVG中的链接,用于将自身保存到文件
我正在构建一个生成SVG图表的工具。该工具通过浏览器(REST URL)调用。生成是一项非常耗时且耗费资源的任务,并且从某种意义上说实际上是无状态的,因为不可能发出相同的请求并获得相同的SVG。
我需要一个用户能够通过其浏览器保存快照(SVG)。我能想到的最好的方法是在图像本身中嵌入DOWNLOAD_ME链接,该链接打包显示的SVG并将其下载为文件。
但是,我不能仅仅让它工作。我究竟做错了什么?这里是否有更好/更容易/更便携的方法来实现我的目标?
不适用于我的地方
<svg contentScriptType="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
function downloadAsFile() {
var svg = document.getElementsByTagName('svg')[0];
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/,'<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/,'<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
var title = document.getElementById('title-text');
title = title ? title.textContent : 'snapshot';
var anchor = document.getElementById('generated-download-link');
if (!anchor) {
anchor = document.createElement('a');
anchor.id = 'generated-download-link';
anchor.setAttribute('download',title + '.svg');
anchor.setAttribute('href',url);
// anchor.setAttribute('download',url);
// anchor.setAttribute('href','');
svg.appendChild(anchor);
}
anchor.dispatchEvent(new Event('click'));
console.log(anchor);
// anchor.remove();
}
]]>
</script>
<g id="test">
<a download="myFile.svg" onclick="downloadAsFile()" href="#" ><text font-family="Verdana" font-size="16" x="10" y="20">Download me</text></a>
</g>
</svg>
我将Element记录的很好,只是除了记录之外,什么都没有发生。
而且我正在生成事件链接,因为图表的大小可能很大(数十兆字节),而且我真的不想从API膨胀有效负载大小。
编辑:我忘了添加-这是我正在构建的交互式SVG图表-火焰图。而且必须保持互动。
参考
- How do I save/export an SVG file after creating an SVG with D3.js (IE,safari and chrome)?
- https://stackoverflow.com/a/59787804/2078544
解决方法
@ControlAltDel是正确的。实际上,上下文菜单中有一个[另存为]项目。愚蠢的我-因为我在处理链接,所以我以为菜单项会将链接的内容保存为文件。
还是,很高兴知道为什么我的JavaScript方法不起作用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。