SVG 路径转换为 ​​JSON

Question

我有这条路：

<path id="secnb1l1" class="lungon"
    fill="none" stroke="black" stroke-width="1"
    d="M 93.00,444.00
       C 93.00,444.00 114.00,506.00 114.00,506.00
         102.30,512.28 100.00,518.71 100.00,531.00
         100.00,531.00 86.00,534.00 86.00,534.00
         86.00,534.00 68.95,485.00 68.95,485.00
         68.95,485.00 58.00,452.00 58.00,452.00
         58.00,452.00 93.00,444.00 93.00,444.00 Z
       M 75.00,458.00
       C 75.00,458.00 79.00,458.00 79.00,458.00
         78.99,466.29 79.26,463.93 76.00,471.00
         76.00,471.00 86.00,471.00 86.00,471.00
         82.12,462.60 83.00,464.37 83.00,455.00
         83.00,455.00 75.00,458.00 75.00,458.00 Z" />

我想将其转换为 JSON。 就像在这个LINK 上一样

SVG 转换为 JSON 的快速示例：

（SVG）：

<path d=" M 10 25
        L 10 75
        L 60 75
        L 10 25"
        stroke="red" stroke-width="2" fill="none" />

（JSON）：

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
             { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
             { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

恐怕没有发电机可以让我的工作更轻松。 手动转换它很痛苦。

在此先感谢您的帮助 ：）

编辑

我使用 d3.js 进行缩放和平移。

Answer 1

鉴于您尚未为曲线周围的路径指定分辨率等内容，我刚刚创建了一个JSON，它具有从该坐标到下一坐标的路径类型的额外属性。

var d = document.getElementById('secnb1l1').getAttribute('d');

d = d.replace(/\s{2,}/g, ' '); // Remove multiple spaces
d = d.replace(/([a-zA-Z])\s[0-9]/g, '$1,'); // Add letters to coords group
d = d.split(" "); // Split on space

var coords = [];

for (var i = 0; i < d.length; i++) {
    var coordString = d[i];
    var coordArray = coordString.split(",");

    var coord = {
        x: coordArray[coordArray.length - 2],
        y: coordArray[coordArray.length - 1]
    };

    if (coordArray.length > 2) {
        coord.path = coordArray[0];
    }

    coords.push(coord);

}

您可以看到它在这个小提琴中起作用。

Answer 2

如果不想摆弄字符串操作，也可以使用DOM接口。

接口

PathSegList

从那里，您可以遍历路径元素路径段列表，并从中创建一个json字符串。

var path = document.getElementById(<pathid>),
    seglist = path.pathSegList,
    length = seglist.numberOfItems, i = 0, seg,
    out = [], data, type;


for (; i < length; i++) {
    seg = seglist.getItem(i);
    type = seg.pathSegTypeAsLetter;
    data = { type: seg.pathSegTypeAsLetter };

    switch (type) {
        case 'M':
        case 'm':
        case 'l' :
        case 'L' :
            data.x = seg.x;
            data.y = seg.y;
        break;

        case 'C':
        case 'c':
            data.x = seg.x;
            data.y = seg.x;
            data.x1 = seg.x1;
            data.y1 = seg.y1;
            data.x2 = seg.x2;
            data.y2 = seg.y2;
        break;
        /*
         * to
         * be
         * continued
         */
    }
    out.push(data);
}

return JSON.stringify(out);

我没有测试上面的代码，它应该概述迭代路径段的基本过程。 由于存在多种不同类型的细分，因此，如上所述，您可以“切换”类型，然后从那里创建合适的数据。 或者，可以使用path.normalizedPathSegList代替path.pathSegList返回段列表，其中每个段都转换为立方贝塞尔path.normalizedPathSegList的类型，但是上次尝试时，出现了“尚未实现错误”。

我创建了一个小提琴，表明该代码有效！

Answer 3

您可以访问这里，我们有节点包和 API，以及一个简单的 Web 界面。

Github: https://github.com/Rexfont/svgJson

API 指令也在那里给出，例如：

svgjson({data: 'filepath/string', web: false, file: true, remove: true, output: true, filename: 'example.txt'})

如果您希望在 Web 上多次使用它或使用 npm for node，则可以使用该 API