javascript - How do I get the global coordinates of a grouped svg element? -

suppose have following document (fiddle):

<svg>     <g transform="translate(50,50)">         <rect width="20" height="20" style="fill:black;">     </g> </svg> 

how global coordinates of rect element assuming don't know it's in group?

it kind of hard find. searching methods of svgelement results in pages saying svgelement has no methods! in fact have ton of methods, inherited:

http://www.w3.org/tr/svg/types.html#interfacesvglocatable

depending on want can use result of getctm or getscreenctm transform svgpoint, , learn element is:

root = document.getelementbyid('root') rec = document.getelementbyid('rec') point = root.createsvgpoint() # top-left relative svg element ctm = rec.getctm() console.log point.matrixtransform(ctm) # top-left relative document ctm = rec.getscreenctm() console.log point.matrixtransform(ctm) 

http://jsfiddle.net/kitsu_eb/zxvax/3/