关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。
想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。
7年前关闭。
Improve this question
考虑到不想检查 D3js 可视化代码或复制粘贴等的最终用户。
给定 D3 <svg>
元素本身具有所有形状和样式(不在任何外部 CSS 中)。
是否有库/代码允许此最终用户单击按钮将代码下载为独立的 SVG 文件。
该文件应该是有效的,可以用 Inkscape 和其他 SVG 兼容软件打开。这允许并授权最终用户 fork 文件,将其打开到 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 ;您可能更愿意将其集成到您的网站/文件夹中。
关于svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18492617/