1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: SVGGraphicsElement.getBBox()
slug: Web/API/SVGGraphicsElement/getBBox
tags:
- API
- Method
- Reference
- SVG
- SVG DOM
- SVGGraphicsElement
browser-compat: api.SVGGraphicsElement.getBBox
---
{{APIRef}}
**`SVGGraphicsElement.getBBox()`** 메서드는 객체가 들어가는 가장 작은 직사각형의 좌표를 알아냅니다. 반환되는 좌표는 (목표 요소에 포함된 모든 요소의 모든 기하 특성의 적용 이후의) 현재 SVG 공간에 관련되어 있습니다.
> **참고:** `getBBox()` 는 요소가 아직 렌더링되지 않은 경우일지라도
> 반드시 메서드가 호출된 시점에서의 실제 바운딩 박스를 반환해야 합니다.
> 이 메서드는 또한 요소나 부모 요소에 적용된 어떠한 변형도 고려하지 않습니다.
> **참고:** `getBBox` 는 {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}}와
> 다른 값을 반환하는데, {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}}는
> 뷰포트에 관련된 값을 반환합니다.
## 구문
```js
let bboxRect = object.getBBox();
```
### 매개변수
- `Options` {{experimental_inline}} {{optional_inline}}
- : 요소의 어떤 부분들이 바운딩 박스에 포함되는지를 제어하는 데 쓰이는 옵션 dictionary. 가능한 옵션은 아래와 같습니다.
- `fill`
- : fill이 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `true` 입니다.
- `stroke`
- : stroke가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.
- `markers`
- : markers가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.
- `clipped`
- : 바운딩 박스가 클리핑되어야 함을 나타내는 boolean 값. 기본 값은 `false` 입니다.
### 반환 값
반환 값은 {{domxref("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>
<!-- 녹색으로 BBox를 보여줍니다 -->
<rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
<!-- 적색으로 BoundingClientRect를 보여줍니다 -->
<rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>
```
### JavaScript
```js
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}}
## 브라우저 호환성
{{Compat}}
## 같이 보기
- [SVG Primer 내의 getBBox](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox)
|
