将D3.JS示例"bullet.html"保存到SVG

Question

我正在使用D3.JS网站上的子弹图示例http://bl.ocks.org/4061961:

我的目标是将子弹图本身保存为SVG文件,以便在Inkscape中进行编辑.使用带有phantom.js的rasterize.js示例,我能够修改代码,将子弹图保存为PNG文件,并以编程方式提取SVG代码并将其保存到文件中.下面是修改后的rasterize.js文件,用于保存SVG代码:

var page = require('webpage').create(), address, output, size;


if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                var results = page.evaluate(function(){
                   return document.getElementById('chart').innerHTML
                })
            console.log(results);
            phantom.exit();
        }, 200);
    }
});
}

上面的JS存储在"rasterize.js"中,并在命令行上提供给phantomjs.exe以创建SVG和PNG文件.

> phantomjs.exe rasterize.js bullet.html bullet.png > bullet.svg

以下是存储在GIST上的"bullet.svg"文件的链接:https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg 您可以将此文件保存到本地驱动器并在浏览器中查看.

但是,如当前存储的那样,此文件不会加载到Inkscape中.我修改了生成的文件,添加了一个？xml标头并用xmlns修改了svg元素,因为我还手动将各个元素包装到一个块中.

我错过了什么？一旦我弄清楚如何使它工作,我将需要修改提取SVG的代码以获得标题写入.

修改rasterize.js(上面)以编写一个干净的SVG的其他想法或提示？谢谢!

Answer 1

Svg crowbar对于单个 svg 元素做得非常好，它只是您必须添加的一个书签（仅适用于 chrome）。它是由纽约时报开发的。

\n\n

\n

一个特定于 Chrome 的书签，可从 HTML 文档中提取 SVG 节点和随附的\n 样式，并将它们下载为 SVG 文件\xe2\x80\x94A 文件\n，例如，您可以在 Adob​​e Illustrator 中打开和编辑该文件。\n 因为SVG 与分辨率无关，当您想要使用 Web 技术创建要打印的文档（例如，可能在新闻纸上）时，它非常适合。它是根据 d3.js 创建的，\n 但无论您选择如何生成 SVG，它都应该可以正常工作。

\n

\n