Get bounding box for SVG path using jQuery

Question

I want to get the getBBox() for svg path in jquery. i tried like this

$(\"#\"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

Answer 1

Try Element.getBoundingClientRect(). It's from the html DOM, but works for me on SVG elements (without much transformation).

Answer 2

The getBBox() native implementation in Webkit is buggy, you can find the bug tracker here. Actually It's fixed now

A solution is to use an SVG library that has it's own algorithms for calculating such matters, one of them is Raphael.js.

You could make use of Raphael's element.getBBox(), which does the same thing as the native getBBox().

Answer 3

One thing to make sure is that your svg is added to the DOM and not detached. Also make sure that your SVG element

Answer 4

getBBox is a native SVG method and isn't part of jquery so you would need to write

$("#"+ path id)[0].getBBox()

example

If you're getting a non-zero value for the example and a zero value in your code then there must be something else going on that you've not shown us.

The most likely causes are that the path is a child of <defs> i.e. you're only using it indirectly in a pattern or clipPath or alternatively the it has a display style of none in which case it wouldn't be rendered so would have no bounding box.

Answer 5

I too am having a hard time getting the JQuery syntax to work for me. This returned Uncaught TypeError: Object [object Object] has no method 'getBBox':

console.log($("#testtext").getBBox().width);

... because I had omitted the array index (thanks @Christian Vielma, below)!

However standard Javascript worked for me and I was able to display the width of the (in my case) RECT in the Chrome console:

console.log(document.getElementById("testtext").getBBox().width);

So you might try that instead.