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?
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.
getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
getBoundingClientRect() gives a result relative to the viewport's top-left corner ( 0,0 ), not relative to an element's parent, whereas el.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With