Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getBBox() vs getBoundingClientRect() vs getClientRects()

I am unable to find an explicit reference for the use of these functions: getBBox() vs getBoundingClientRect() vs getClientRects().

Could you explain what they do and what are the coordinates (and their referential) they return?

like image 608
Troopers Avatar asked Nov 13 '15 08:11

Troopers


People also ask

What is getBoundingClientRect () in Javascript?

The getBoundingClientRect() method returns the size of an element and its position relative to the viewport. The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.

What is getBoundingClientRect () Top?

getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

What is getBoundingClientRect relative to?

getBoundingClientRect() gives a result relative to the viewport's top-left corner ( 0,0 ), not relative to an element's parent, whereas el.


1 Answers

getBBox is defined in the SVG specification it returns coordinates in the local coordinate system after the application of transforms.

getBoundingClientRect and getClientRects are defined in the CSSOM specification. Their main difference is that they return coordinates in the outer SVG coordinate system.

getBoundingClientRect returns a single rect that is the union of all the rects that getClientRect would return.

like image 111
Robert Longson Avatar answered Sep 28 '22 20:09

Robert Longson