javascript - 如何从多个 svg 文件中提取数据并将其存储在 JavaScript 数组中

Question

我有多个类似于 svg 文件

<?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>

我希望能够提取每个 svg 的“路径 d 值”和“viewBox 值”并将其保存到如下所示的数组中，其中 data[i][0] 是 viewbox 值，data[ i][1]为路径d值

 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']];

有人知道如何做到这一点吗？

编辑。我希望能够循环遍历数组并创建 svg 以在浏览器中使用

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>';
        }

-- 已更新 --

已完成的代码 - 谢谢 Jinyoung Kim

查看“svg”目录并自动查找所有 svg 文件

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

在node.js中，cheerio是最适合您的情况的模块。我写了一个非常粗略的代码，但它可能足以实现你的目标。

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