Question

我正在以编程方式生成大量D3图。它们目前包含带有SVG，CSS和JS的HTML。

我想以编程方式将这些图表导出为纯SVG。我无法弄清楚如何做到这一点。

我找到的最接近的解决方案是：Convert JavaScript-generated SVG to a file - 但问题是我需要以编程方式执行此操作，而不是使用Chrome开发者工具或SVG Crowbar等需要手动点击/保存的工具。

我更喜欢使用Python，但此时我对任何工具/编程语言都很开心。

Answer 1

这就是我要做的事情：

下载并安装phantomjs，这是一个无头webkit浏览器，您可以从命令行运行并通过脚本自动执行。

将此javascript保存为renderHTML.js：

var args = require('system').args,
    page = require('webpage').create(),
    url = args[1];

page.onConsoleMessage = function (msg) {
    console.log(msg);
};

page.onLoadFinished = function() {
    page.evaluate(function() {
        console.log(document.documentElement.outerHTML);
    });
    phantom.exit();
};

page.open(url);

使用上面的脚本运行phantomjs，指定要渲染的url，如下所示：
```
phantomjs renderHTML.js {urltorender} > {localfiletosave}
```
您现在可以在指定的URL处拥有文档的整个HTML内容，包括通过本地文件中的javascript（直到页面加载）完成的动态内容修改。使用您喜欢的任何语言对本地文件进行后处理以满足您的要求。

如果在保存文件之前需要进一步修改javascript，可以在调用console.log之前使用phantomjs api调度和/或等待事件。只需在步骤2中修改脚本。

如果你碰巧知道并喜欢javascript，你可以跳过第4步，将你想到的任何“后期处理”直接放入第2步的脚本中。

Answer 2

我写了一个简短的Javascript程序来做这件事。

您可以通过npm运行npm install -g playfair来解决此问题（代码位于manleyjster/playfair的GitHub上）。

它从命令行运行，它通过启动PhantomJS，将其指向一个html文件（在命令行中传入），然后捕获它在页面上找到的第一个SVG元素来工作。 / p>

您还可以通过命令行选项传入id，以按ID选择SVG元素。

该计划的核心是这个功能：

function getSvg(selector) {
    var svgNode, tmp;

    svgNode = document.querySelector(selector);

    if (svgNode) {
        tmp = document.createElement('div');
        tmp.appendChild(svgNode);
        result = { text: tmp.innerHTML };
    } else {
        result = {};
    }

    return result;
}

Answer 3

您可以使用phantomJS执行此操作。它是一个无头的Web浏览器，因此您可以编写脚本从页面中取出svg并将其写入文件。

以编程方式将D3.js图导出为静态SVG文件

3 个答案: