5

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

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

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

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

4

2 回答 2

5

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

于 2013-08-29T05:02:55.947 回答
1

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

于 2013-08-28T15:52:50.210 回答