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

Question

我正在使用 D3.JS 站点上的子弹图示例，地址为 http://bl.ocks.org/4061961 :



我的目标是将子弹图本身保存为 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 header 并使用 xmlns 修改 svg 元素来修改生成的文件，因为我还手动将各个元素包装到单个块中。

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

修改 rasterize.js(以上)以编程方式编写干净的 SVG 的其他想法或技巧？谢谢!

Answer 1

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

A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with d3.js in mind, but it should work fine no matter how you choose to generate your SVG.