The SVG circle at right has a transform
rotating it by 45°.
Blue <div>
are placed based on the return value of getBoundingClientRect()
.
Green <polygon>
are drawn showing the local bounding box of each circle.
The result of getBoundingClientRect()
is the same as finding the local bounding box,
transforming the points of that bounding box into screen space,
and then calculating the bounding box of those points.
As shown, this is not a minimal bounding box when certain object transformations are present.
(True for Chrome, Safari, Opera, and IE; Firefox does have both clientRects fitting to the circles.)