将D3.JS示例“ bullet.html”保存为SVG

Question

我正在D3.JS网站上的http://bl.ocks.org/4061961处使用项目符号图示例：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9aeDBuei5naWYifQ==” alt =“在此处输入图像说明”>“ >>

我的目标是将项目符号图本身保存为SVG文件，以便在Inkscape中进行编辑。通过使用带有phantom.js的rasterize.js示例，我能够修改代码以将项目符号图保存到PNG文件，并以编程方式提取SVG代码并将其保存到文件中。以下是修改后的保存SVG代码的rasterize.js文件：

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？谢谢！

我正在D3.JS网站http://bl.ocks.org/4061961上的项目符号图示例中工作：我的目标是将项目符号图本身另存为SVG文件，以便在Inkscape中进行编辑。使用rasterize.js ...

Answer 1

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

Answer 2

您也可以使用我刚刚发布的名为SaveSVG的开源库。