Get the bounding box of a selected SVG element

nicholaswmin picture nicholaswmin · Feb 17, 2013 · Viewed 11.5k times · Source

I want to read:

  • width,height,x,y measurements

for a particular SVG element.


I suppose that easiest way to go about this is to fetch the minimum bounding box first and read it's properties.

How can I access this?

Answer

pawel picture pawel · Feb 18, 2013

If you have a reference to the DOM node, use

svgNode.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

Edit: SVG Edit has a method to return currently selected elements:

svgCanvas.getSelectedElems()

so in the above example:

svgNode = svgCanvas.getSelectedElems()[0];
svgNode.getBoundingClientRect();