svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？

Question

关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

7年前关闭。




Improve this question




考虑到不想检查 D3js 可视化代码或复制粘贴等的最终用户。

给定 D3 <svg>元素本身具有所有形状和样式(不在任何外部 CSS 中)。

是否有库/代码允许此最终用户单击按钮将代码下载为独立的 SVG 文件。

该文件应该是有效的，可以用 Inkscape 和其他 SVG 兼容软件打开。这允许并授权最终用户 fork 文件，将其打开到 SVG 编辑器中并在其上进行一些更高级的设计。

Answer 1

这是一个很好的使用方式 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 ;您可能更愿意将其集成到您的网站/文件夹中。