将JavaScript生成的SVG转换为文件

Question

我正在使用d3.js来显示一些数据.我希望能够获取它生成的SVG代码并将其存储为.svg图像文件(用于在Inkscape/Illustrator中进行编辑).

我试过简单地复制svg标签的内容即

<svg>
<!--snip-->
</svg>

到一个名为image.svg的文件中,但是它错过了颜色/样式信息,它在两个单独的CSS文件中.

我正在使用这个例子.

有一个简单的方法吗？

Answer 1

我认为SVG Crowbar可能是解决这个问题的最好方法.

文档

Answer 2

这是一个很好的方法,使用svg-crowbar.js在您的网站上提供一个按钮,允许您的用户下载您的可视化svg.

1)定义按钮的CSS:

.download { 
  background: #333; 
  color: #FFF; 
  font-weight: 900; 
  border: 2px solid #B10000; 
  padding: 4px; 
  margin:4px;
}

2)定义按钮的HTML/JS:

<i 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</i>

以下是对同一个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加载的; 您可能更喜欢将其集成到您的网站/文件夹中.

Answer 3

这是迟到的,但是使用D3.js,内联CSS会很简单.你会做的事情如下:

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("fill", data ? quantize : null)
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("fill", quantize);
});

function quantize(d) {
  return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}

我的函数量化只是演示的快速入侵,但你可以看一下colorbrewer来计算出将分位数应用于颜色的逻辑.