getBBox() vs getBoundingClientRect() vs getClientRects()

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.


some elements(like span tag) will have multiple ClientRects when they are wrapped into multiple lines.MDN Element.getClientRects()
and a BoundingRect is the union of ClientRects of a element.MDN Element.getBoundingClientRect()