Question

我们有一个应该发送png文件的API。这个png文件是几个svg文件的组合和属性的一些变化：background-color，image size ..

我们在服务器上使用node.js.

我尝试使用d3成功修改SVG文件＆amp; Jsdom在后端使用d3：

var fs = require('fs');
var d3 = require('d3');
var JSDOM = require('jsdom').JSDOM;

var outputLocation = 'test.svg';
const window = (new JSDOM(`<html><head></head><body></body></html>`, { pretendToBeVisual: true })).window;

window.d3 = d3.select(window.document); //get d3 into the dom

d3.xml("./react02.svg").mimeType("image/svg+xml").get(function(error, xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    if (error) throw error;
    console.log(xml);
    window.d3.select('body')
    .append('div').attr('class', 'container')
    .appendChild(importedNode);
});
fs.writeFileSync(outputLocation, window.d3.select('.container').html()) //using sync to keep the code simple

但我总是收到错误：

TypeError: Cannot read property 'innerHTML' of null
    at Selection.selection_html [as html] (/home/juanda/kk2/node_modules/d3-selection/build/d3-selection.js:793:20)
    at Object.<anonymous> (/home/juanda/kk2/test2.js:18:65)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:201:16)
    at bootstrap_node.js:626:3

在服务器端找不到任何示例/库读取和修改svg文件。

Answer 1

从d3移到snapsvg，因为我不需要数据分析，只需使用svg本身。这是我的代码：

let {JSDOM} = require('jsdom')
var resolve = require('resolve');

resolve('snapsvg', { basedir: __dirname }, function (err, resource) {
  if (err) console.error(err)
  else {
    const options = {
      runScripts: "dangerously",
      resources: "usable",
      url: "file:///prueba.html" // avoid cors error reading svg file
    };
    const dom = new JSDOM(`
      <!DOCTYPE html><html><body><div id="test"></div></body></html>
    `, options);

    var script = dom.window.document.createElement('script');
    script.src = `file://${resource}`;
    var head= dom.window.document.getElementsByTagName('head')[0];
    head.appendChild(script);
    // console.log(dom.serialize())
    script.onload = function () {
      // console.log("Script loaded and ready");
      // console.log(dom.window)
      var s = dom.window.Snap("#test");
      dom.window.Snap.load("file:///Users/juandaniel/Code/prueba/2375.svg", onSVGLoaded);
      function onSVGLoaded(data) {
        s.append(data);
        console.log(s.node.innerHTML)
      }
    };
  }
});

从node.js加载和修改svg文件

1 个答案: