svg - How to get group element render position? -

svg - How to get group element render position? -

refer code below, position of bounding box not actual render position of grouping of elements.

the grouping element can used build complicated unit tank / ship cannons. , grouping element doesn't have x or y property help move inner elements have utilize transform move tank / ship.

however, realized when translate group, bounding box never reflect real render position more, 1 have thought how actual render position of group?

http://jsfiddle.net/k4uhwlj4/

var root = document.createelementns("http://www.w3.org/2000/svg", "svg"); root.style.width = '500px'; root.style.height = '500px'; document.body.appendchild(root); var g = document.createelementns("http://www.w3.org/2000/svg", "g"); g.setattributens(null, 'transform', 'translate(50, 50)'); root.appendchild(g); var r = document.createelementns("http://www.w3.org/2000/svg", "rect"); r.setattribute("x", "50"); r.setattribute("y", "60"); r.setattribute("width", "100"); r.setattribute("height", "110"); r.setattribute("fill", "blue"); r.setattributens(null, 'transform', 'translate(50, 50)'); g.appendchild(r); var c = document.createelementns("http://www.w3.org/2000/svg", "circle"); c.setattribute("cx", "150"); c.setattribute("cy", "140"); c.setattribute("r", "60"); c.setattribute("fill", "red"); g.appendchild(c); var bbox = g.getbbox(); var o = document.createelementns("http://www.w3.org/2000/svg", "rect"); o.setattribute("x", bbox.x); o.setattribute("y", bbox.y); o.setattribute("width", bbox.width); o.setattribute("height", bbox.height); o.setattribute("stroke", 'black') o.setattribute("fill", 'none'); root.appendchild(o);

the .getbbox() method doesn't take transformation business relationship (per spec) according post:

how getbbox() svgrect calculated?

to solve can add together parent g has no transform attribute:

var parentg = document.createelementns("http://www.w3.org/2000/svg", "g"); root.appendchild(parentg); var g = document.createelementns("http://www.w3.org/2000/svg", "g"); g.setattributens(null, 'transform', 'translate(50, 50)'); parentg.appendchild(g);

http://jsfiddle.net/sydgc091/

svg bounding-box