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?

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?

• javascript
• svg
• svg-edit

• It would be helpful to say in the question above that you're using svg-edit: code.google.com/p/svg-edit – Matt Coughlin Commented Feb 18, 2013 at 0:31

4 Answers 4

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();

Please see http://granite.sru.edu/~ddailey/svg/BBox0M.svg for the example and answer.

In brief, this code works for me in Chrome:

<script>
function foo(evt)
{
    console.log(evt.target.getBBox());      
}
</script>

<svg>
    <circle onclick="foo(evt)" r="20%" cx="50%" cy="50%"/>
</svg>

Assuming you have a handle to the element, I would think that this would work, no?

box = svgedit.utilities.getBBox(selected);

I'm not sure if I'm understanding you correctly, but if you're looking to get the height or width of a jQuery element, use width() and height():

log("The svg is " + $("img").width() + "px wide.");
log("The svg is " + $("img").height() + "px tall.");

JSFiddle example: http://jsfiddle.net/gGWU4/