7

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

在此处输入图像描述

我的目标是将子弹图本身保存为 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 的其他想法或技巧？谢谢！

4

2 回答 2

2

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

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

于 2013-06-25T03:40:52.793 回答
0

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

于 2020-03-22T18:32:17.147 回答