W3cubDocs

/Web APIs

SVGGraphicsElement: getBBox() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The SVGGraphicsElement.getBBox() method 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.

Note: getBBox returns different values than getBoundingClientRect(), as the latter returns value relative to the viewport

Syntax

getBBox()
getBBox(options)

Parameters

options Experimental Optional

An options dictionary used to control which parts of the element are included in the bounding box. The available options are:

fill: A boolean value indicating that the fill should be included in the bounding box, defaults to true.
stroke: A boolean value indicating that the stroke should be included in the bounding box, defaults to false.
markers: A boolean value indicating that the markers should be included in the bounding box, defaults to false.
clipped: A boolean value indicating that the bounding box should be clipped, defaults to false.

Return value

The returned value is an SVGRect object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.

Examples

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="green" stroke-width="3" fill="none"></rect>
  <!-- Shows BoundingClientRect in red -->
  <rect id="rect_2" stroke="red" stroke-width="3" fill="none"></rect>
</svg>

JavaScript

const rectBBox = document.querySelector("#rect_1");
const rectBoundingClientRect = document.querySelector("#rect_2");
const groupElement = document.querySelector("#group_text_1");

const bboxGroup = groupElement.getBBox();
rectBBox.setAttribute("x", bboxGroup.x);
rectBBox.setAttribute("y", bboxGroup.y);
rectBBox.setAttribute("width", bboxGroup.width);
rectBBox.setAttribute("height", bboxGroup.height);

const 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
Scalable Vector Graphics (SVG) 2> # __svg__SVGGraphicsElement__getBBox>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`getBBox`	1	12	1.5 ["Before Firefox 128, the `getBBox()` method returned an empty `DOMRect` when there is no fill (bug 1019326).", "Before Firefox 68, this method didn't work for `<textPath>` and `<tspan>` elements (bug 937268)."]	≤12.1	3	18	4 ["Before Firefox for Android 128, the `getBBox()` method returned an empty `DOMRect` when there is no fill (bug 1019326).", "Before Firefox for Android 68, this method didn't work for `<textPath>` and `<tspan>` elements (bug 937268)."]	≤12.1	1	1.0	3	1