将JavaScript生成的SVG转换为文件
我正在使用d3.js来可视化一些数据。 我希望能够将它生成的SVG代码存储为.svg图像文件（用于Inkscape / Illustrator中的编辑）。
我试图简单地复制svg标签的内容即
<svg> <!--snip--> </svg>
到一个名为image.svg的文件中，但是这会遗漏在两个单独的CSS文件中的颜色/样式信息上。
我正在使用这个例子 。
有一个简单的方法来做到这一点？
我认为SVG Crowbar可能是解决这个问题的最好方法。
文档
这里有一个很好的方法来使用svg-crowbar.js在你的网站上提供一个button来允许你的用户以svg的forms下载你的可视化文件。
1）定义你的button的CSS：
.download { background: #333; color: #FFF; font-weight: 900; border: 2px solid #B10000; padding: 4px; margin:4px; }
2）定义你的button的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加载;; 你可能更喜欢把它整合到你的网站/文件夹中。
现在已经很晚了，但是使用D3.js就可以简单地embeddedCSS。 你会做这样的事情：
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来计算将分位数应用于颜色的逻辑。
这适用于我在Windows v16b和Safari v5.1在Windows上： http ://phrogz.net/SVG/chloropleth.html
我所做的只是使用开发工具复制为HTML SVG节点，将其粘贴到空白文档，并将链接添加到两个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>
再次validation在Chrome和Safari中工作。
