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

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

node.js d3.js svg

从node.js加载和修改svg文件,node.js,d3.js,svg,Node.js,D3.js,Svg,我们有一个应该发送png文件的API。此png文件由几个svg文件和一些属性更改组成：背景颜色、图像大小我们正在服务器上使用node.js 为了修改SVG文件和Jsdom以在后端使用d3，我尝试了使用d3，但没有成功： var fs = require('fs'); var d3 = require('d3'); var JSDOM = require('jsdom').JSDOM; var outputLocation = 'test.svg'; const window = (new J

我们有一个应该发送png文件的API。此png文件由几个svg文件和一些属性更改组成：背景颜色、图像大小

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

为了修改SVG文件和Jsdom以在后端使用d3，我尝试了使用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文件的示例/库

从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)
      }
    };
  }
});

你可以考虑使用。如果将SVG作为XML加载，则可以使用类似jQuery的语法对其进行操作，从而消除对d3的需求。与jQuery不同的是，cheerio没有假设它是在HTML上运行的，这就省去了臭名昭著的麻烦。我已经用jsdom和snapsvg解决了这个问题，但也许我会试试cherio。非常感谢。