将JavaScript生成的SVG转换为文件

Question

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

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

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

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

我正在使用this example。

有一种简单的方法吗？

Answer 1

我认为SVG Crowbar可能是处理此问题的最佳方式。

Documentation

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)) + ")";
}

我的函数 quantze 只是演示的快速入门，但您可以查看colorbrewer以找出将分位数应用于颜色的逻辑。

Answer 4

这适用于我在Chrome v16b和Windows上的Safari v5.1：http://phrogz.net/SVG/chloropleth.html

我所做的就是使用开发人员工具将SVG复制为HTML格式节点，将其粘贴到空白文档中，然后将链接添加到两个CSS文件中。这在Safari中是否正确显示？

修改：这是一个独立的SVG文件：http://phrogz.net/SVG/chloropleth.svg
为此，我将xmlns属性添加到<svg>和外部链接：

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

再次验证可以在Chrome和Safari中使用。

Answer 5

有一个扩展名为“ svg-grabber”（svg export is another option），可以尝试一下，只需单击扩展图标即可工作，这是stackoverflow页面的结果：

Answer 6

这不是上面问题的答案，这仅适用于搜索了如何进行转化的人

<svg>
...
<svg/>

.svg文件。

只需使用编辑器打开不需要的任何.svg文件（例如VS Code），然后将所有现有代码替换为您的

<svg>
...
<svg/> 

并保存它。