<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.
Share Improve this question edited May 31, 2015 at 15:06 TimoStaudinger 42.6k16 gold badges89 silver badges96 bronze badges asked May 31, 2015 at 15:01 Pramesh HarshanaPramesh Harshana 1632 gold badges2 silver badges9 bronze badges1 Answer
Reset to default 3You 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.