From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/svggraphicselement/getbbox/index.html | 85 ++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/zh-cn/web/api/svggraphicselement/getbbox/index.html (limited to 'files/zh-cn/web/api/svggraphicselement/getbbox') diff --git a/files/zh-cn/web/api/svggraphicselement/getbbox/index.html b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html new file mode 100644 index 0000000000..4649341611 --- /dev/null +++ b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html @@ -0,0 +1,85 @@ +--- +title: getBBox +slug: Web/API/SVGGraphicsElement/getBBox +tags: + - SVG + - getBBox +translation_of: Web/API/SVGGraphicsElement/getBBox +--- +

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

+ +

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

+
+ +

Syntax

+ +
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.

+ +

Example

+ +

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

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

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only).
+ +


+  

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf