The SVGGraphicsElement.getBBox()
allows us to determine the coordinates of the smallest rectangle in which the object fits. The coordinates returned are with respect to the current SVG space (after the application of all geometry attributes on all the elements contained in the target element).
Note: getBBox()
must return the actual bounding box at the time the method was called—even in case the element has not yet been rendered. It also does not account for any transformation applied to the element or its parents.
getBBox
returns different values than getBoundingClientRect()
, as the latter returns value relative to the viewport
Syntax
let bboxRect = object.getBBox();
Return value
The returned value is a SVGRect
object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.
Example
HTML
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">Hello World!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text> </g> <!-- Shows BBox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- Shows BoundingClientRect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg>
JavaScript
var rectBBox = document.querySelector('#rect_1'); var rectBoundingClientRect = document.querySelector('#rect_2'); var groupElement = document.querySelector('#group_text_1'); var bboxGroup = groupElement.getBBox(); rectBBox.setAttribute('x', bboxGroup.x); rectBBox.setAttribute('y', bboxGroup.y); rectBBox.setAttribute('width', bboxGroup.width); rectBBox.setAttribute('height', bboxGroup.height); var boundingClientRectGroup = groupElement.getBoundingClientRect(); rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x); rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y); rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width); rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'getBBox' in that specification. |
Recommendation | Initial definition (applies to SVG elements only). |