SVG getBBox에서 글자 테두리가 빠지는 이유와 브라우저별 지원

글자를 감쌌는데 테두리만 밖으로 나온다면

SVG 편집기에서 글자 크기에 맞춰 선택 상자를 만들었는데 굵은 테두리가 상자 밖으로 나올 수 있다. getBBox()로 구한 영역을 내보내기 범위로 사용했다면 테두리가 잘리는 원인도 된다. 이 경우 먼저 볼 것은 stroke 포함 여부다.

getBBox의 기본값은 fill: true, stroke: false다. 지원 환경에서는 getBBox({ fill: true, stroke: true })로 글자와 테두리를 함께 측정한다. 글자에 stroke-width를 줬다고 측정 옵션까지 자동으로 바뀌지는 않는다.

다만 메서드가 있다는 사실만 확인해서는 부족하다. 2026년 10월 26일 기준 MDN 호환 데이터는 옵션 인자를 Firefox 155부터 지원하는 것으로 표시하며 Chrome·Safari는 미지원으로 기록한다. Chrome에서 같은 옵션을 넣었는데 숫자가 그대로라면 이 차이부터 확인할 필요가 있다.

같은 SVG 좌표계 안에서 측정값을 전달한다

다음은 변환이 없는 SVG에서 글자 일부를 감싸는 예제다. tspan과 사각형은 같은 좌표계를 사용하며, JavaScript는 두 요소가 만들어진 뒤 실행한다. Firefox 158 이상에서 stroke 옵션을 적용할 수 있다.

<svg viewBox="0 0 360 120" xmlns="http://www.w3.org/2000/svg">
  <text x="24" y="72" font-size="44" fill="navy"
        stroke="navy" stroke-width="8">
    <tspan id="label">DIMA</tspan>
  </text>
  <rect id="selection" fill="none" stroke="orange" />
</svg>

const label = document.querySelector("#label");
const selection = document.querySelector("#selection");
const box = label.getBBox({ fill: true, stroke: true });

for (const name of ["x", "y", "width", "height"]) {
  selection.setAttribute(name, String(box[name]));
}

이 코드는 테두리를 포함한 측정 결과로 상자를 그리는 예다. 상자를 그리는 작업 자체가 SVG의 잘린 부분을 복구하지는 않는다. 별도의 viewBox나 클리핑 영역으로 출력을 자르는 앱이라면 그 영역에도 맞는 좌표를 전달해야 한다.

Firefox 158은 글자 일부를 재는 경우를 바꿨다

Firefox 158 개발자 릴리스 노트의 변화는 tspan과 textPath에서 fill·stroke 옵션을 반영한다는 것이다. 전체 text 요소에서는 이미 가능했던 측정을 글자 일부나 곡선 위 텍스트에도 적용한다.

따라서 전체 제목을 선택할 때는 맞지만 제목 안의 단어 하나를 선택하면 상자가 좁아지던 도구라면, 어느 요소에 getBBox를 호출하는지와 Firefox 버전을 함께 살펴야 한다. 옵션을 지원하는 Firefox라도 158 이전에는 이 두 요소에서 옵션을 무시했다.

여러 브라우저에 제공하는 편집기는 옵션 하나로 동일한 결과가 나온다고 전제할 수 없다. 지원하지 않는 환경에도 필요한 측정 기능이라면 별도 계산 경로를 마련하고, 실제 출력과 비교해야 한다. 단순히 모든 방향에 같은 여백을 더하는 방식이 모든 글꼴·테두리 모양에 정확하다고 볼 수도 없다.

화면 좌표와 글자의 실제 픽셀은 또 다른 문제다

getBBox는 SVG 내부의 좌표를 돌려준다. getBoundingClientRect는 뷰포트 기준 위치와 크기를 돌려주므로 스크롤하면 위치 값도 달라진다. SVG 안에 그릴 사각형과 HTML로 얹는 선택 상자는 같은 숫자를 그대로 공유할 수 없다.

또한 SVG 2의 텍스트 경계 계산은 글자의 셀 전체를 기준으로 삼는다. 글리프의 실제 잉크가 찍힌 픽셀만 훑어 최소 영역을 찾는 기능이 아니다. 테두리를 포함했는데도 글자 주변에 공간이 보인다는 이유만으로 오류라고 판단해서는 안 된다.

테두리가 빠졌다면 옵션과 브라우저 지원을, 상자 위치가 어긋났다면 좌표계를, 픽셀 단위로 바짝 자르고 싶다면 필요한 측정 방식을 확인한다. 세 문제를 나누면 글자 크기를 임의로 보정하는 시행착오를 줄일 수 있다.