将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元素来修改了结果文件，还手动将单个path元素包装到单个g块中。

我错过了什么？一旦我弄清楚如何手动使其工作，我就需要修改提取SVG的代码以获取标题写入。

其他修改rasterize.js（上面）以编程方式编写干净的SVG程序的想法或提示？谢谢！

- John Leonard

---

这是一个有趣的工作流程，除了d3部分之外，我没有任何经验，所以不太有资格回答，但是......你的bullets.svg不是纯SVG，因为它被包装在<div id="bullets">中。我会期望这对Inkscape来说是个障碍，不是吗？你尝试过不使用这个div吗？ - meetamit

哦，我刚刚注意到有多个SVG（我猜这就是为什么你将它们包装在div中的原因），我同样认为这对Inkscape也是一个问题。如果是这样，您将不得不修改mbostock的示例，将它们全部放在单个SVG的<g>中。 - meetamit

解决此问题的一种可能方法是使用phantomjs将其渲染为PDF，然后将PDF转换为SVG。 - Lars Kotthoff

@lars - 关于PDF建议的想法很好。我重新运行了代码并生成了PDF输出，新文件在Inkscape中加载时没有出现错误。虽然如此，我仍然希望看到本地SVG解决方案，我想我已经投入其中了。谢谢！ - John Leonard

Answer 1

Svg crowbar是一个Chrome插件，它能提取HTML文档中的SVG节点和相关样式，并将其下载为一个SVG文件。你可以在Adobe Illustrator中打开并编辑该文件。由于SVG是分辨率无关的，因此非常适合用于创建打印文档（比如新闻纸）的Web技术。它最初是为了d3.js而创建的，但无论您选择什么方式生成SVG，它都应该能正常工作。

- Christopher Chiche

Answer 2

你也可以使用我刚发布的开源库SaveSVG。

- Coola