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

}

您可以在 this fiddle 中看到它。

Answer 2

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

Interface

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

我没有测试上面的代码，它应该概述迭代Paths段的基本过程。由于存在相当多的不同类型的段，因此，如上所述，您可以在类型上“切换”并从那里创建合适的数据。或者，代替path.pathSegList你可以使用path.normalizedPathSegList返回一个段列表，其中每个段转换为立方贝塞尔的类型，但是当最后一次尝试它时，我得到了一个»还没有实施了错误«。

我创建了fiddle，表明代码有效！

SVG路径转换为JSON

2 个答案: