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 neglects any transformation applied on the element or its parents.

getBBox returns different values than getBoundingClientRect, as the latter returns value relative to the viewport


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.



<svg viewBox="0 0 200 200" xmlns="">
    <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>
    <!-- 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>


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);


Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Recommendation Initial definition (applies to SVG elements only).


See also