如何根据显示顺序将 ID 属性设置为 svg 元素？

Question

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1069" height="575" xml:space="preserve">
    <desc>Created with Fabric.js 1.4.13</desc>
    <defs></defs>
    <rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;"
    transform="translate(461.15 451.15)" id="0"></rect>
    <rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;" transform="translate(429.15 310.15)"
    id="1"></rect>
    <rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;" transform="translate(351.15 177.15)"
    id="2"></rect>

这个代码是由fabricjs生成的。第一个添加的矩形对象被放置在svg代码的第一行。在生成svg代码之前，我通过拖动改变了矩形对象的位置。但是svg代码没有根据那个改变。什么我想做的是根据显示顺序为svg代码中的每个矩形设置ID。显示顺序是指屏幕上从上到下或从下到上。有可能吗？谢谢。

Answer 1

您可以使用此 JS 为每个 'rect' 标签根据其位置指定一个 id。

var SVG = document.getElementsByTagName('svg')[0];
var children = SVG.childNodes;
var ID = 0;
[].forEach.call(children, function (child) {
    if(child.nodeType === 1 && child.tagName == "rect"){
        child.setAttribute('id', ID);
        ID++;
    }
});

这会将 id 0 赋予第一个 'rect' 1 至下一个，依此类推。