Wie Daten aus mehreren svg-Dateien extrahieren und speichern sie in einer Javascript-Array

Question

ich mehrere svg auf ähnliche Dateien haben

<?xml version="1.0" encoding="iso-8859-1"?> 
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 684.214 684.214" style="enable-background:new 0 0 684.214 684.214;" xml:space="preserve"> 
<g> 
    <g> 
     <g> 
      <path style="fill:#010002;" d="M285.22,103.603h49.476v222.613h-89.065L285.22,103.603z M349.567,103.603v222.613h89.065 
       l-39.579-222.613H349.567z M557.652,215.549c0,119.059-215.549,468.665-215.549,468.665s-215.54-349.606-215.54-468.665 
       C126.563,96.519,223.063,0,342.112,0S557.671,96.519,557.652,215.549z M508.908,215.549c0-91.957-74.83-166.777-166.796-166.777 
       s-166.786,74.82-166.786,166.777s74.82,166.796,166.786,166.796S508.908,307.506,508.908,215.549z"/> 
     </g> 
    </g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
</svg> 

Ich möchte den ‚Pfad d-Wert‘ extrahieren zu können und ‚viewBox Werte‘ jedes svg und es in ein Array speichern, die wie folgt aussieht, in denen Daten [i] [0] ist der Viewbox-Wert und Daten [i] [1] ist der Weg d Wert

data = [ 
     ['0 0 499.392 499.392', 'M409.81,160.113C409.79,71.684,338.136,0,249.725,0C161.276,0,89.583,71.684,89.583,160.113  c0,76.325,119.274,280.238,151.955,334.638c1.72,2.882,4.826,4.641,8.178,4.641c3.351,0,6.468-1.759,8.168-4.631  C290.545,440.361,409.81,236.438,409.81,160.113z M249.716,283.999c-68.303,0-123.915-55.573-123.915-123.895  c0-68.313,55.592-123.895,123.915-123.895s123.876,55.582,123.876,123.895S318.029,283.999,249.716,283.999z'], 
     ['0 0 498.923 498.923', 'M249.462,0C151.018,0,70.951,80.106,70.951,178.511c0,92.436,133.617,192.453,172.248,315.948  c0.83,2.667,3.322,4.484,6.116,4.465c2.804-0.039,5.256-1.876,6.048-4.563c37.478-126.533,172.6-223.307,172.609-315.869  C427.963,80.106,347.886,0,249.462,0z M249.462,313.925c-77.184,0-139.987-62.812-139.987-139.987  c0-77.184,62.803-139.987,139.987-139.987c77.165,0,139.977,62.803,139.977,139.987  C389.439,251.113,326.626,313.925,249.462,313.925z'], 
     ['0 0 254.019 254.019', 'M126.514,48.282c-43.428,0-78.738,35.319-78.738,78.738c0,43.389,35.309,78.718,78.738,78.718  c43.389,0,78.738-35.329,78.738-78.708C205.252,83.601,169.932,48.282,126.514,48.282z M126.514,198.898  c-39.647,0-71.879-32.232-71.879-71.869s32.222-71.928,71.879-71.928s71.879,32.29,71.879,71.928  S166.171,198.898,126.514,198.898z M193.352,127.029c0,36.882-29.926,66.808-66.828,66.808  c-36.912,0-66.838-29.936-66.838-66.808c0-36.921,29.936-66.847,66.838-66.847C163.426,60.172,193.352,90.108,193.352,127.029z  M41.308,56.733l0.02,38.836h-0.059c-0.391,12.389-13.971,17.117-13.971,17.117v24.924h0.02l-0.02,57.312  c0,0-5.491,7.093-12.604,0v-82.226h0.166c-8.285-3.527-14.411-4.748-14.802-17.117H0V56.733l6.224-0.029L9.252,94.28H16.6  l0.928-38.348h5.989l0.723,38.348h8.617l1.983-37.547L41.308,56.733L41.308,56.733z M252.1,122.857h-15.232v77.038h-17.596  V54.144h17.596C236.878,54.134,260.844,84.548,252.1,122.857z'], 
     ['0 0 231.779 231.779', 'M140.501,45.881v0.322l-52.173,0.274l1.602-3.039l0,0l2.912-3.078l41.934-0.215L146.578,0  L83.55,0.342l9.028,39.042c-6.526-7.308-22.569-22.833-37.156-17.459l1.583,4.377C69.413,21.7,84.586,37.322,89.911,43.438  c-8.881,3.273-20.4,5.657-27.229-0.449l-3.087,3.517c4.055,3.635,9.194,4.885,14.606,4.866c3.166,0,6.429-0.518,9.575-1.212  c-29.643,20.351-50.336,65.548-50.14,99.792c0.225,45.441,37.283,82.069,82.665,81.825c45.451-0.215,82.069-37.254,81.845-82.714  C197.93,112.425,173.719,63.36,140.501,45.881z M139.504,176.439c-4.357,3.869-9.809,6.312-16.238,7.406l0.078,13.082  l-14.059,0.078l-0.078-13.072c-6.351-1.075-12.056-3.732-17.02-7.855c-5.95-5.09-9.008-10.991-9.164-17.537l0.264-3.586  l13.659-0.059l0.059,1.368c0.098,5.422,1.739,9.477,5.022,12.359c3.283,2.872,7.972,4.318,14.01,4.318  c6.028-0.068,10.747-1.563,14.079-4.465c3.283-2.951,4.866-6.937,4.846-12.144c-0.02-4.279-1.544-7.621-4.709-10.141  c-3.283-2.579-8.969-4.817-16.941-6.693c-8.832-2.062-15.632-5.227-20.097-9.389c-4.543-4.279-6.908-9.79-6.947-16.306  c-0.039-7.455,2.843-13.668,8.608-18.436c3.928-3.253,8.578-5.393,13.835-6.37l-0.059-11.392l14.049-0.078l0.059,11.021  c6.282,0.85,11.558,3.039,15.681,6.468c5.52,4.602,8.568,11.021,9.008,19.052l0.078,1.397l-13.776,0.068l-0.156-1.143  c-0.664-5.012-2.345-8.764-5.071-11.148c-2.667-2.345-6.605-3.576-11.714-3.527c-5.305,0.01-9.575,1.309-12.476,3.762  c-2.902,2.423-4.279,5.706-4.26,10.102c0,3.801,1.339,6.771,4.006,9.008c2.706,2.286,7.552,4.27,14.391,5.872  c10.014,2.306,17.596,5.764,22.628,10.268c5.032,4.572,7.63,10.386,7.65,17.293C148.815,164.266,145.718,171.134,139.504,176.439  z'], 
     ['0 0 202.614 202.614', 'M177.91,55.377h-22.589v-1.368C155.311,24.25,131.091,0,101.302,0  C71.503,0,47.292,24.25,47.292,54.009v1.368H24.704L11.495,202.614h179.624L177.91,55.377L177.91,55.377z M101.302,6.624  c19.687,0,36.619,12.105,43.761,29.232c-9.448-14.137-25.5-23.478-43.761-23.478c-18.231,0-34.313,9.34-43.77,23.507  C64.713,18.729,81.635,6.624,101.302,6.624z M57.297,55.377c4.406-20.263,22.481-35.485,44.024-35.485  c21.582,0,39.618,15.222,44.024,35.485H57.297z']]; 

Wer irgendwelche Ideen Wie macht man das?

Bearbeiten. Ich möchte durch das Array in einer Schleife zu können und

for (var i=0; i<$.data.length; i++) { 
      html += '<div class="tour-tag-icon" data-path="'+ $.data[i][1] +'" data-viewbox="'+ $.data[i][0] +'">'; 
      html += ' <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="'+ $.data[i][0] +'" xml:space="preserve" width="40px" height="40px">'; 
      html += '  <path d="'+ $.data[i][1] +'"></path>'; 
      html += ' </svg>'; 
      html += '</div>'; 
     } 

in einem Browser svg zur Verwendung erstellen - Aktualisiert -

Completed Code - Thx Jinyoung Kim

Sieht durch 'svg' Verzeichnis und findet automatisch alle sVG-Dateien

var cheerio = require('cheerio'); 
var fs = require('fs'); 
var path = require('path'); 

var results = []; 
var count = 0; 

fs.readdir(path.join(__dirname, '/svg'), function(err, files) { 
    files 
     .filter(function(file) { return file.substr(-4) === '.svg'; }) 
     .forEach(function(file) { 
      fs.readFile(path.join(__dirname, '/svg')+'/'+file, 'utf-8', function(err, data) { 
       if (err) { return console.error(err); } 

       var $ = cheerio.load(data, { xmlMode: true }); 
       var data = getDatum($); 
       results.push(data); 

       count++; 
       if (files.length === count) { generateJson(); } 
      }); 
     }); 
}); 

function getDatum($) { 
    return [$('svg').attr('viewBox'), $('path').attr('d')]; 
} 

function generateJson() { 
    fs.writeFile('./output.json', JSON.stringify(results), 'utf8', function() { 
    console.log('completed!'); 
    process.exit(); 
    }); 
} 

Answer 1

In node.js, cheerio die besten geeignete Modul für Ihren Fall ist. Ich habe einen Code sehr grob geschrieben, aber es könnte ausreichen, um Ihr Ziel zu erreichen.

var cheerio = require('cheerio'); 
var fs = require('fs'); 

var paths = [ 
    'one.svg', 
    'two.svg' 
    // ...and so on, Write all your SVGs 
]; 

var results = []; 
var count = 0; 

paths.forEach(function (path) { 
    fs.readFile(path, 'utf8', function (err, data) { 
    if (err) { return console.error(err); } 

    var $ = cheerio.load(data, { xmlMode: true }); 
    var data = getDatum($); 
    results.push(data); 

    count++; 
    if (paths.length === count) { generateJson(); } 
    }); 
}); 

function getDatum($) { 
    return [$('svg').attr('viewBox'), $('path').attr('d')]; 
} 

function generateJson() { 
    fs.writeFile('./output.json', JSON.stringify(results), 'utf8', function() { 
    console.log('completed!'); 
    process.exit(); 
    }); 
}