Clever Geek Handbook

Get bounding box of selected SVG element

I want to read:

  • width

    , height

    , x

    , y

    Measurement

for a specific SVG element.

I believe the easiest way to do this is to first extract the hard bounding box and read its properties.

How can I access it?

+3


source to share


4 answers


Assuming you have an element handle, I think this will work, doesn't it?



box = svgedit.utilities.getBBox(selected);
+1


source


If you have a DOM node reference then use

svgNode.getBoundingClientRect()

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

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



svgCanvas.getSelectedElems()

so in the above example:

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


source


For an example and answer see http://granite.sru.edu/~ddailey/svg/BBox0M.svg .

In short, 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>
+2


source


I'm not sure if I understand you correctly, but if you want 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/

0


source






More articles:


All Articles