<svg xmlns="" xmlns: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>

this code has generated by fabricjs.1st added rect object is placed in first line in svg code.before genarate the svg code i change the positions of rect object by dragging.but the svg code has not changed acording to that.what i want to do is set the ID to every rect in svg code acording to displaying order.displaying order means top to bottom or bottom to top on screen.is it possible to do?thank you.

<svg xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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>

this code has generated by fabricjs.1st added rect object is placed in first line in svg code.before genarate the svg code i change the positions of rect object by dragging.but the svg code has not changed acording to that.what i want to do is set the ID to every rect in svg code acording to displaying order.displaying order means top to bottom or bottom to top on screen.is it possible to do?thank you.

• javascript
• jquery
• svg
• fabricjs

Share Improve this question Follow edited May 31, 2015 at 15:06 TimoStaudinger 42.6k1616 gold badges8989 silver badges9696 bronze badges asked May 31, 2015 at 15:01 Pramesh HarshanaPramesh Harshana 16322 gold badges22 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use this JS to give each 'rect' tag an id based on its location.

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

This will give the id 0 to the first 'rect' 1 to the next and so on.