SVG 路径转换为 JSON答案

【问题标题】：SVG path convert into JSONSVG 路径转换为 JSON
【发布时间】：2014-09-17 09:24:07
【问题描述】：

我有这条路：

<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 进行缩放和平移。

【问题讨论】：

您希望曲线如何出现在 JSON 中。尽可能多的坐标或每个坐标都有一个“路径类型”属性？
@richieahb，我试过path type，我不知道，但这不会出现在我的html中。所以我想我需要coordinates。谢谢你的回复:)

标签： javascript json svg

【解决方案1】：

如果你不想摆弄字符串操作，你也可以使用 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);

我没有测试上面的代码，它应该概述了迭代路径段的基本过程。由于有很多不同类型的段，您可以如上文所述，“切换”类型并从那里创建合适的数据。或者，您可以使用path.normalizedPathSegList 而不是path.pathSegList，它返回一个段列表，其中每个段都转换为三次贝塞尔曲线的类型，但是当最后一次尝试时，我得到了一个»尚未实现的错误«。

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

【讨论】：

读完了，我现在鼻子在流血。我是 SVG 和 JSON 的新手，另外，我是一个视觉学习者。您能否使用我上面的路径提供示例？ :)
此代码采用绝对路径命令。如果源路径使用相对路径命令（小写），则需要修改。
显然switch语句中少了很多case，但这只是野心的问题……相对到绝对的转换很容易实现，最后一个坐标只需要一个变量必要时进行维护和添加。但是现在上面的代码只是读取数据，不管是相对的还是绝对的。

【解决方案2】：

鉴于您没有为围绕曲线的路径指定分辨率等内容，我刚刚创建了一个 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 中看到它的工作原理。

【讨论】：

看不到我的路径先生 :( 我怎样才能让它可见？
在您的问题中，您只要求它作为 JSON。在控制台中查看 JSON。
如何寻找控制台？我没有使用萤火虫。

【解决方案3】：

你可以到这里来，我们有节点包和 API，还有一个简单的网络界面。

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

API 指令也在其中给出示例：

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

如果你想在 web 上多次使用 API，你可以使用它，或者使用 npm for node

【讨论】：