SVGGraphicsElement: метод getBBox()

Базовая линия Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Метод SVGGraphicsElement.getBBox() позволяет определить координаты наименьшего прямоугольника, в который помещается объект. Возвращаемые координаты относятся к текущему пространству SVG (после применения всех атрибутов геометрии ко всем элементам, содержащимся в целевом элементе).

Примечание: getBBox() должен вернуть фактическую область обвода в момент вызова метода — даже в случае, если элемент еще не отрисован. Он также не учитывает какие-либо преобразования, применённые к элементу или его родительским элементам.

Примечание: getBBox возвращает значения, отличные от getBoundingClientRect(), так как последнее возвращает значение, относящееся к области просмотра.

Синтаксис

getBBox()
getBBox(options)

Параметры

options Экспериментально Необязательно

Словарь опций, используемый для управления частями элемента, включёнными в область обвода. Доступные опции:

fill: Булево значение, указывающее, что заливка должна быть включена в область обвода, по умолчанию true.
stroke: Булево значение, указывающее, что контур должен быть включён в область обвода, по умолчанию false.
markers: Булево значение, указывающее, что маркеры должны быть включены в область обвода, по умолчанию false.
clipped: Булево значение, указывающее, что область обвода должна быть обрезана, по умолчанию false.

Возвращаемое значение

Возвращаемое значение — объект SVGRect, определяющий область обвода. Это значение не зависит от каких-либо атрибутов преобразования, применённых к нему или родительским элементам.

Примеры

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

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

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__getBBox

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getBBox`	1	12	1.5 ["До Firefox 128, метод `getBBox()` возвращал пустую `DOMRect` при отсутствии заливки (ошибка 1019326).", "До Firefox 68, этот метод не работал для элементов `<textPath>` и `<tspan>` (ошибка 937268)."]	≤12.1	3	18	4 ["До Firefox для Android 128, метод `getBBox()` возвращал пустую `DOMRect` при отсутствии заливки (ошибка 1019326).", "До Firefox для Android 68, этот метод не работал для элементов `<textPath>` и `<tspan>` (ошибка 937268)."]	≤12.1	1	1.0	3

См. также

getBBox в руководстве по SVG

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox