20

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

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

我找到的最接近的解决方案是：将 JavaScript 生成的 SVG 转换为文件——但问题是我需要以编程方式执行此操作，而不是使用需要手动单击/保存的 Chrome 开发人员工具或 SVG Crowbar 之类的工具。

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

4

3 回答 3

17

这是我要做的：

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

  2. 将此 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);

  3. 使用上述脚本运行 phantomjs，指定要呈现的 url，如下所示：

    phantomjs renderHTML.js {urltorender} > {localfiletosave}

  4. 现在，您在指定的 URL 处拥有文档的整个 HTML 内容，包括在本地文件中通过 javascript 完成的动态内容修改（直到页面加载）。使用您喜欢的任何语言对本地文件进行后处理以满​​足您的要求。

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

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

于 2013-08-14T20:01:51.520 回答
4

我写了一个简短的 Javascript 程序来做到这一点。

您可以npm通过运行将其关闭npm install -g playfair（代码位于 GitHub 上manleyjster/playfair）。

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

您还可以通过命令行选项传入一个 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;
}
于 2014-08-09T04:53:18.090 回答
2

你可以用phantomJS来做到这一点。它是一个无头网络浏览器，因此您可以编写一个脚本来从您的页面中提取 svg 并将其写入文件。

于 2013-08-14T19:54:32.397 回答