按钮下载inpage SVG代码作为SVG文件？

Question

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

给定一个D3 <svg>元素,其中包含所有形状和样式(不在任何外部CSS中).

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

该文件应该可以使用Inkscape和其他SVG兼容软件打开.这允许并允许最终用户分叉文件,将其打开到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加载的; 您可能更喜欢将其集成到您的网站/文件夹中.