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.1st生成添加了rect对象放在svg代码的第一行。在生成svg代码之前我通过拖动改变了rect对象的位置。但是svg代码没有根据那个改变。我想做的是根据显示顺序在svg代码中为每个rect设置ID。显示顺序表示屏幕上下到底或从下到上。可以吗？谢谢。

Answer 1

你可以使用这个JS来给每个＆＃39; rect＆＃39;根据其位置标记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赋予第一个＆＃39; rect＆＃39; 1到下一个等等。

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

1 个答案: