translate the below document.

SVGGraphicsElement.getBBox()

1 files changed, 97 insertions, 0 deletions

diff --git a/files/ko/web/api/svggraphicselement/getbbox/index.md b/files/ko/web/api/svggraphicselement/getbbox/index.md
new file mode 100644
index 0000000000..99e7c86018
--- /dev/null
+++ b/files/ko/web/api/svggraphicselement/getbbox/index.md
@@ -0,0 +1,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)