SVGGraphicsElement.getBBox()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

SVGGraphicsElement.getBBox() 메서드는 객체가 들어가는 가장 작은 직사각형의 좌표를 알아냅니다. 반환되는 좌표는 (목표 요소에 포함된 모든 요소의 모든 기하 특성의 적용 이후의) 현재 SVG 공간에 관련되어 있습니다.

참고: getBBox() 는 요소가 아직 렌더링되지 않은 경우일지라도 반드시 메서드가 호출된 시점에서의 실제 바운딩 박스를 반환해야 합니다. 이 메서드는 또한 요소나 부모 요소에 적용된 어떠한 변형도 고려하지 않습니다.

참고: getBBox 는 getBoundingClientRect()와 다른 값을 반환하는데, getBoundingClientRect()는 뷰포트에 관련된 값을 반환합니다.

구문

let bboxRect = object.getBBox();

매개변수

Options Experimental Optional

요소의 어떤 부분들이 바운딩 박스에 포함되는지를 제어하는 데 쓰이는 옵션 dictionary. 가능한 옵션은 아래와 같습니다.

fill: fill이 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 true 입니다.
stroke: stroke가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 false 입니다.
markers: markers가 바운딩 박스에 포함되어야 함을 나타내는 boolean 값. 기본 값은 false 입니다.
clipped: 바운딩 박스가 클리핑되어야 함을 나타내는 boolean 값. 기본 값은 false 입니다.

<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

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

명세서

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__getBBox

브라우저 호환성

BCD tables only load in the browser

같이 보기

SVG Primer 내의 getBBox