node.jsからsvgファイルをロードして変更する

私たちはpngファイルを送信するAPIを持っています。このPNGファイルは、いくつかのsvgファイルの構成であり、属性のいくつかの変更：背景色、イメージサイズです。node.jsからsvgファイルをロードして変更する

私たちはサーバー上でnode.jsを使用しています。

私は、バックエンドでD3を使用するSVGファイル& 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ファイルを見つける。

出典

2017-12-21 user2670996

（https://www.npmjs.com/package/cheerio）。 SVGをXMLとしてロードする場合、SVGをjQueryのような構文で操作して、d3の必要性を取り除くことができます。（そして、jQueryとは対照的に、cheerioは、HTMLに作用して、悪名高いヒックアップを惜しみません。） – ccprog

jsdomとsnapsvgで解決しましたが、おそらく私はcherioを試してみます。ありがとうございました！ – user2670996

データ分析が不要なので、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) 
     } 
    }; 
    } 
});

出典

2017-12-22 22:45:38 user2670996

node.jsからsvgファイルをロードして変更する

答えて

関連する問題