SVGGraphicsElement: getBBox() 方法

SVGGraphicsElement.getBBox() 方法允许我们确定对象适合的最小矩形的坐标。返回的坐标相对于当前 SVG 空间（在对目标元素中包含的所有元素应用所有几何属性之后）。

注意：getBBox() 必须返回调用该方法时的实际边界框 - 即使元素尚未渲染。它也不考虑应用于元素或其父元素的任何转换。

注意：getBBox 返回的值与 getBoundingClientRect() 不同，因为后者返回相对于视窗的值

语法

getBBox()
getBBox(options)

参数

options 实验性可选

用于控制边界框中包含元素哪些部分的选项字典。可用的选项是

填充: 一个布尔值，指示是否应将填充包含在边界框中，默认值为 true。
描边: 一个布尔值，指示是否应将描边包含在边界框中，默认值为 false。
标记: 一个布尔值，指示是否应将标记包含在边界框中，默认值为 false。
剪裁: 一个布尔值，指示边界框是否应剪裁，默认值为 false。

返回值

返回值是 SVGRect 对象，它定义了边界框。此值与应用于它或父元素的任何转换属性无关。

示例

HTML

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

规范

规范
可缩放矢量图形 (SVG) 2 # __svg__SVGGraphicsElement__getBBox

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

SVG Primer 中的 getBBox