12

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

I have added the path to an SVG element. I tried some other element in SVG, for example text node in that case it returns the some bounding box value.

How can I calculate the bounding box for a path in SVG?

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
SivaRajini
  • 7,225
  • 21
  • 81
  • 128
  • Perhaps you can find inspiration in this simple utility which lets you enter a path and then shows the bounding box. http://codepen.io/netsi1964/full/vNoemp/ – Netsi1964 Nov 30 '15 at 08:39

5 Answers5

13

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • it was bad solution/response.i already know about that and also tried like this but it still returns zero. – SivaRajini May 06 '13 at 03:51
  • in which case it will returns "0" value. i tried for rect element too but it returns "zero" only in all browsers. http://stackoverflow.com/questions/16393361/getbbox-returns-nothing-for-rect-or-path – SivaRajini May 06 '13 at 07:25
  • If I click on the "example" link in the answer I gave above using Firefox I get -2390. Are you saying that using Firefox and clicking on the link you get 0? – Robert Longson May 06 '13 at 07:27
  • for me this also returns "-2390" in all browsers. but in my project i am debugging the value that time it returns "zero" i also added this to svg object. i dont know the exact cause ? may i know in which case it returns "zero" – SivaRajini May 06 '13 at 07:34
  • It would return 0 if the rect/path had a style of display:none or was a child of as in neither of those cases is the rect/path actually drawn. – Robert Longson May 06 '13 at 07:37
  • i want to get the rectangle or box for grouped svg path. please refer below jsfiddle. http://jsfiddle.net/gFJyC/ – SivaRajini May 07 '13 at 04:46
  • Works for me on Firefox i.e. does not display 0 when I modified the jsfiddle to use jquery 1.9.1 (select from dropdown on top left). – Robert Longson May 14 '13 at 02:06
10

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

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • 1
    Actually, [it doesn't work on Chrome](https://code.google.com/p/chromium/issues/detail?id=230599). The [sample there](http://granite.sru.edu/~ddailey/svg/B/bbox2.3.svg) shows the issue and the differences between current Chrome version (45) and latest IE/FF. – saguiar Sep 15 '15 at 19:22
  • Chrome is correct now - the discrepancy in the sample posted in the comment above is due to stroke width. – nicholaswmin Nov 25 '17 at 16:12
6

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.

MSC
  • 3,286
  • 5
  • 29
  • 47
  • 6
    I believe you have to use $('#testtext')[0].getBBox().width – Christian Vielma Jan 15 '15 at 00:33
  • 1
    just to clarify, both `$('#testtext')[0]` ([jQuery()](http://api.jquery.com/jquery()/)) and `document.getElementById("testtext")` return a DOM element object, which, then, natively supports `getBBox().width` on [svg elements](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement) – Ricardo Jan 04 '18 at 18:01
0

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

OsamaBinLogin
  • 609
  • 6
  • 10
0

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

yeahdixon
  • 6,647
  • 1
  • 41
  • 43