[英]Convert JavaScript-generated SVG to a file
我正在使用 d3.js 来可视化一些数据。 我希望能够获取它生成的 SVG 代码并将其存储为.svg
图像文件(用于在 Inkscape/Illustrator 中编辑)。
我曾尝试简单地复制 svg 标签的内容,即
<svg>
<!--snip-->
</svg>
放入一个名为 image.svg 的文件中,但这会遗漏颜色/样式信息,该信息位于两个单独的 CSS 文件中。
我正在处理这个例子。
有没有一种简单的方法可以做到这一点?
我认为SVG Crowbar可能是解决这个问题的最好方法。
这是使用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加载的; 您可能更愿意将其集成到您的网站/文件夹中。
这已经晚了,但是使用 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)) + ")";
}
我的函数quantize只是用于演示的快速技巧,但您可以查看colorbrewer来计算将分位数应用于颜色的逻辑。
这适用于 Windows 上的 Chrome v16b 和 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 中使用。
有一个名为“ svg-grabber ”的扩展( svg export 是另一种选择),您可以尝试一下,只需单击扩展图标即可工作,这是 stackoverflow 页面的结果:
这不是上述问题的答案,这仅适用于搜索如何转换的人
<svg>
...
<svg/>
到 .svg 文件。
只需使用编辑器(如 VS Code)打开您不需要的任何 .svg 文件,然后将所有现有代码替换为您的
<svg>
...
<svg/>
并保存它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.