将页面内 SVG 代码下载为 SVG 文件的按钮？ [关闭]答案

【问题标题】：Button to download inpage SVG code as an SVG file? [closed]将页面内 SVG 代码下载为 SVG 文件的按钮？ [关闭]
【发布时间】：2013-08-31 19:19:15
【问题描述】：

鉴于最终用户不想检查 D3js 可视化代码，也不想复制粘贴等。

给定一个 D3 <svg> 元素，其中包含所有形状和样式（不在任何外部 CSS 中）。

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

该文件必须有效才能使用 Inkscape 和其他 SVG 兼容软件打开。这允许并授权最终用户分叉文件，将其打开到 SVG 编辑器中并在其上进行一些更高级的设计。

【问题讨论】：

Downloadify.
可能重复：stackoverflow.com/questions/8435537/…
我澄清了我的想法。我要求的不是最终用户必须安装的一种插件/系统，并且接受了其他问题。我正在寻找一种可以在最终用户第一次访问时立即启动的解决方案，无需安装插件/书签
Crowbar 只是一个 JavaScript 文件，因此无需安装。它引用的小书签只是加载 JS 文件，您可以在代码中自己执行此操作。代码现在的方式是，它会在加载并抓取在页面上找到的所有 SVG 后立即运行，但应该很容易将其更改为更具针对性并将其与您的代码集成。整个JS只有200多行。
所以我需要一个按钮，当点击加载 Crowbar.js，然后抓取 SVG。

标签： svg d3.js

【解决方案1】：

如果您想在客户端上执行所有操作，那么一种选择是使用 Javascript 使用 SVG 内容创建一个 HTML blob object，然后将该 blob 编码为与按钮或 <a> 标记关联的数据 uri。

【讨论】：

这个答案会好得多，如果它实际上显示了“如何”做到这一点..

【解决方案2】：

这是使用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 加载的；您可能更愿意将其集成到您的网站/文件夹中。

【讨论】：