SVGGraphicsElement.getBBox() — Methode · JavaScript-Referenz

Signatur

SVGGraphicsElement.prototype.getBBox(options)

Beschreibung

getBBox() liefert die sogenannte Bounding Box eines SVG-Grafikelements (z. B. <rect>, <path>, <text>, <g>) als DOMRect mit x, y, width und height. Die Werte beziehen sich auf das lokale Nutzerkoordinatensystem des Elements, also ohne die Wirkung seines eigenen transform-Attributs bzw. der Transformationen seiner Vorfahren.

Typische Einsatzgebiete sind das Zentrieren oder Ausrichten von Text, das Zeichnen von Auswahlrahmen oder Hintergründen hinter Beschriftungen, das Berechnen eines passenden viewBox für eine dynamisch erzeugte Grafik sowie Kollisionsprüfungen in Diagrammbibliotheken.

Standardmäßig enthält die Box nur die Füllgeometrie – Strichstärke (stroke-width), Marker und Filter-Effekte werden nicht berücksichtigt. Bei Gruppen (<g>) wird die Vereinigung der Boxen aller Kindelemente zurückgegeben, wobei die Transformationen der Kinder einbezogen werden.

Für Bildschirmkoordinaten (inklusive aller Transformationen und Scrollposition) ist stattdessen Element.getBoundingClientRect() geeignet.

Parameter

Name	Typ	Default	Beschreibung
$options	object	{ fill: true, stroke: false, markers: false, clipped: false }	Optionales Objekt aus SVG 2: `fill` (Füllgeometrie einbeziehen), `stroke` (Strichbreite einbeziehen), `markers` (Marker einbeziehen), `clipped` (Beschneidung anwenden). Wird von vielen Browsern ignoriert.

Rückgabewert

Typ

DOMRect

Beschreibung

Ein DOMRect (in älteren Browsern SVGRect) mit x, y, width und height im lokalen Nutzerkoordinatensystem des Elements.

Beispiele

Bounding Box eines Kreises auslesen

const svg = document.querySelector('svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '40');
circle.setAttribute('r', '20');
svg.append(circle);

const { x, y, width, height } = circle.getBBox();
console.log(x, y, width, height);

30 20 40 40

Hintergrund hinter einer Textbeschriftung zeichnen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const label = document.createElementNS(NS, 'text');
label.setAttribute('x', '20');
label.setAttribute('y', '50');
label.textContent = 'Umsatz 2024';
svg.append(label); // muss im DOM und gerendert sein

const box = label.getBBox();
const padding = 4;
const bg = document.createElementNS(NS, 'rect');
bg.setAttribute('x', box.x - padding);
bg.setAttribute('y', box.y - padding);
bg.setAttribute('width', box.width + padding * 2);
bg.setAttribute('height', box.height + padding * 2);
bg.setAttribute('fill', '#ffe08a');
svg.insertBefore(bg, label); // Rechteck hinter den Text legen

viewBox automatisch an den Inhalt anpassen

const fitViewBox = (svg, margin = 10) => {
  const content = svg.querySelector('g');
  const { x, y, width, height } = content.getBBox();
  svg.setAttribute(
    'viewBox',
    `${x - margin} ${y - margin} ${width + margin * 2} ${height + margin * 2}`
  );
};

fitViewBox(document.querySelector('#chart'));
console.log(document.querySelector('#chart').getAttribute('viewBox'));

z. B. "-10 -10 420 320"

Vergleich mit getBoundingClientRect() bei Transformation

const rect = document.querySelector('#box'); // <rect x="0" y="0" width="100" height="50" transform="scale(2)"/>

console.log(rect.getBBox().width);               // lokale Koordinaten
console.log(rect.getBoundingClientRect().width); // Bildschirmpixel

100 200 (bei viewBox 1:1 zu Pixeln)

// Wichtig · Fallstricke

Nur gerenderte Elemente: Ist das Element (oder ein Vorfahre) nicht im Dokument, hat display: none oder liegt in einem nicht gerenderten Kontext (z. B. <defs>), liefert getBBox() je nach Browser 0 0 0 0 oder wirft (ältere Firefox-Versionen) eine NS_ERROR_FAILURE-Exception. visibility: hidden funktioniert dagegen.
Transformationen: Das eigene transform des Elements wird nicht angewendet. Für Koordinaten im Eltern- oder Bildschirmsystem die Box mit getCTM() bzw. getScreenCTM() umrechnen oder getBoundingClientRect() verwenden.
Strichstärke fehlt: stroke-width, Marker und Filter sind nicht enthalten. Der options-Parameter ({ stroke: true }) ist in vielen Browsern (u. a. Firefox, Safari) nicht bzw. nur teilweise implementiert – Strichbreite ggf. manuell addieren.
Performance: Der Aufruf erzwingt eine Layout-Berechnung. In Schleifen mit DOM-Änderungen Lese- und Schreibzugriffe bündeln, um Layout-Thrashing zu vermeiden.
Text: Bei <text> hängt das Ergebnis von geladenen Webfonts ab; ggf. auf document.fonts.ready warten.

Siehe auch

SVGGraphicsElement Element.getBoundingClientRect() SVGGraphicsElement.getCTM() SVGGraphicsElement.getScreenCTM() DOMRect SVGTextContentElement.getComputedTextLength()