将网页中的SVG代码下载为SVG文件的按钮？

Question

针对不想检查D3js可视化代码，也不想复制粘贴等操作的最终用户。

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

是否有一种库/代码可以让最终用户点击按钮将代码下载为独立的SVG文件。

该文件应该有效地打开Inkscape和其他符合SVG标准的软件。这使最终用户有能力派生文件，将其打开到SVG编辑器中并进行更高级的设计。

- Hugolpz

---

Downloadify。 - Sirko

可能重复：https://dev59.com/52oy5IYBdhLWcg3wnPSJ - Scott Cameron

我澄清了我的想法。我所要求的不是一种需要最终用户安装的插件/系统，而且其他问题已经得到解决。我正在寻找一种解决方案，可以在最终用户第一次访问时立即启动，无需安装插件/书签。 - Hugolpz

Crowbar只是一个JavaScript文件，因此不需要安装。它所指的书签脚本只是加载JS文件，您可以在自己的代码中执行此操作。现在代码的运行方式是它一旦加载就运行并获取页面上找到的所有SVG，但很容易将其更改为更有针对性的，并将其与您的代码集成。整个JS文件仅有200多行。 - Scott Cameron

我需要一个按钮，当点击它时，加载Crowbar.js，然后抓取SVG。 - Hugolpz

我已经修改了svg-crowbar脚本，使其成为一个名为downloadSVG()的函数，可以从您的脚本中调用。该函数将下载网页上的第一个 SVG。要使用它，请在您的div按钮d3代码中添加“.on（”click“，function（）{downloadSVG（）; }）;”。 downloadSVG（）函数位于以下位置：https://bitbucket.org/mas29/public_resources/raw/ed7a469df79bdcc0b06dcd8b60a174194da9ae14/scripts/js/svg_download/downloadSVG.js。 - maia

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加载; 您可能更喜欢将其集成到您的网站/文件夹中。

- Hugolpz

Answer 2

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

- Stephen Thomas

---

如果这个回答能够展示如何做到那一点，它将会更好。 - ftrotter