SVGGraphicsElement: getBBox() 方法
SVGGraphicsElement.getBBox() 方法允许我们确定对象最小外接矩形的坐标。返回的坐标是相对于当前的 SVG 坐标系（在目标元素包含的所有元素上应用了所有几何属性之后）。
注意：getBBox() 必须在调用时返回实际的边界框，即使元素尚未渲染。它也不考虑应用于元素或其父元素的任何变换。
注意：getBBox 返回的值与 getBoundingClientRect() 返回的值不同，后者返回的值是相对于视口的。
语法
js
getBBox()
getBBox(options)
参数
options实验性 可选-
一个选项字典，用于控制边界框中应包含元素的哪些部分。可用选项为：
返回值
返回值是一个 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="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
js
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 |
浏览器兼容性
加载中…