javascript - How to set ID attribute to svg elements according to displaying order? -


<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 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 fabricjs.1st added rect object placed in first line in svg code.before genarate svg code change positions of rect object dragging.but svg code has not changed acording that.what want set id every rect in svg code acording displaying order.displaying order means top bottom or bottom top on screen.is possible do?thank you.

you can use js give each 'rect' tag id based on 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 give id 0 first 'rect' 1 next , on.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

node.js - Using Node without global install -

php - CakePHP HttpSockets send array of paramms -