鉴于终端用户不想检查D3js可视化,也不是复制粘贴的代码是谁,等按钮下载inpage作为SVG文件的SVG代码?
给定D3 <svg>
元素与各种形状和样式中本身(而不是内任何外部CSS)。
是否有库/代码允许此最终用户单击按钮将代码作为独立SVG文件下载。
该文件应该可以在Inkscape和其他SVG兼容软件中打开。这允许和授权最终用户分发文件,将其打开到SVG编辑器并在其上进行一些更高级的设计。
鉴于终端用户不想检查D3js可视化,也不是复制粘贴的代码是谁,等按钮下载inpage作为SVG文件的SVG代码?
给定D3 <svg>
元素与各种形状和样式中本身(而不是内任何外部CSS)。
是否有库/代码允许此最终用户单击按钮将代码作为独立SVG文件下载。
该文件应该可以在Inkscape和其他SVG兼容软件中打开。这允许和授权最终用户分发文件,将其打开到SVG编辑器并在其上进行一些更高级的设计。
下面是使用svg-crowbar.js在您的网站上提供按钮的好方法,它允许用户以svg格式下载您的可视化文件。
0)你需要JQuery。
1)定义的按钮的CSS:
.download {
background: #333;
color: #FFF;
font-weight: 900;
border: 2px solid #B10000;
padding: 4px;
margin:4px;
}
2)定义您的按钮的HTML/JS:
<a
class="download"
href="javascript:(function() { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">
<!--⤋--><big>⇩</big> Download
</a>
这里的那个的JavaScript仔细一看:
javascript:(function(){
var e = document.createElement('script');
if (window.location.protocol === 'https:') {
e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js');
} else {
e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js');
}
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);
})();
3)你完成了。这会产生一个Inkscape可以打开的svg下载。
注意: svg-crowbar.js从https://rawgit.com或http://nytimes.github.com加载;您可能更愿意将其整合到您的网站/文件夹中。
如果你想在客户端上做所有事情,那么一个选择是使用Javascript创建一个使用SVG内容的HTML blob object,然后将该blob编码为与按钮或<a>
标签关联的数据URI。
如果它真的显示“如何”做到这一点,这个答案会更好。 – ftrotter
[Downloadify](http://davidwalsh.name/downloadify)。 – Sirko
可能的重复:http://stackoverflow.com/questions/8435537/convert-javascript-generated-svg-to-a-file –
我澄清了我的想法。我所要求的不是终端用户必须安装的一种插件/系统,而是接受其他问题。我寻找一个解决方案,准备在最终用户第一次访问时触发,无需插件/书签安装 – Hugolpz