SVGRect — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGRect (Alias für DOMRect)

Beschreibung

SVGRect beschreibt ein Rechteck durch die Koordinaten der oberen linken Ecke (x, y) und seine Ausdehnung (width, height). Seit SVG 2 ist SVGRect keine eigene Schnittstelle mehr, sondern nur noch ein Alias für DOMRect. Objekte, die SVG-APIs zurückgeben, sind in modernen Browsern also echte DOMRect-Instanzen und haben zusätzlich die abgeleiteten, schreibgeschützten Eigenschaften top, right, bottom und left.

Diese Rechtecke begegnen dir vor allem an zwei Stellen: SVGGraphicsElement.prototype.getBBox() liefert den Begrenzungsrahmen (Bounding Box) eines Elements im lokalen Benutzerkoordinatensystem. SVGSVGElement.viewBox.baseVal liefert die viewBox eines <svg>-Elements als Rechteck, das du auch ändern kannst.

Einsatzgebiete sind Layout-Berechnungen in SVG, zum Beispiel Text zentrieren, Hintergrundflächen passend zu einem Element zeichnen, Zoom und Pan über die viewBox oder Kollisionsprüfungen. Ein eigener Konstruktor new SVGRect() existiert nicht. Eigene Rechtecke erzeugst du mit new DOMRect(x, y, width, height) oder mit svgElement.createSVGRect().

Parameter

Name	Typ	Beschreibung
$x	number	x-Koordinate der oberen linken Ecke (bei `new DOMRect()` und als Eigenschaft).
$y	number	y-Koordinate der oberen linken Ecke.
$width	number	Breite des Rechtecks. Negative Werte sind bei `DOMRect` erlaubt, sie bedeuten ein gespiegeltes Rechteck.
$height	number	Höhe des Rechtecks.

Rückgabewert

Typ

DOMRect

Beschreibung

Ein Rechteck-Objekt mit den beschreibbaren Eigenschaften x, y, width und height. Die Eigenschaften top, right, bottom und left sind nur lesbar.

Beispiele

Bounding Box eines Textes ermitteln und Hintergrund zeichnen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');
document.body.append(svg);

const text = document.createElementNS(NS, 'text');
text.setAttribute('x', '20');
text.setAttribute('y', '50');
text.textContent = 'Hallo SVG';
svg.append(text);

// getBBox() liefert ein SVGRect bzw. DOMRect
const box = text.getBBox();
console.log(box instanceof DOMRect, box.width > 0);

// Hintergrund-Rechteck mit 4px Innenabstand
const bg = document.createElementNS(NS, 'rect');
const pad = 4;
bg.setAttribute('x', box.x - pad);
bg.setAttribute('y', box.y - pad);
bg.setAttribute('width', box.width + 2 * pad);
bg.setAttribute('height', box.height + 2 * pad);
bg.setAttribute('fill', '#ffe08a');
svg.insertBefore(bg, text);

true true

viewBox auslesen und zum Zoomen verändern

// <svg id="karte" viewBox="0 0 400 200"> ... </svg>
const svg = document.querySelector('#karte');
const vb = svg.viewBox.baseVal; // SVGRect (live)
console.log(vb.x, vb.y, vb.width, vb.height);

// Um Faktor 2 hineinzoomen und dabei den Mittelpunkt beibehalten
const zoom = (factor) => {
  const cx = vb.x + vb.width / 2;
  const cy = vb.y + vb.height / 2;
  vb.width /= factor;
  vb.height /= factor;
  vb.x = cx - vb.width / 2;
  vb.y = cy - vb.height / 2;
};
zoom(2);
console.log(svg.getAttribute('viewBox'));

0 0 400 200 100 50 200 100

Rechtecke erzeugen und auf Überschneidung prüfen

const a = new DOMRect(10, 10, 100, 50);
const b = new DOMRect(80, 40, 60, 60);

const intersects = (r1, r2) =>
  r1.left < r2.right && r1.right > r2.left &&
  r1.top < r2.bottom && r1.bottom > r2.top;

console.log(a.right, a.bottom);
console.log(intersects(a, b));

// Alternative, ältere SVG-API:
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const r = svg.createSVGRect();
r.width = 20;
console.log(r.width, r.height);

110 60 true 20 0

// Wichtig · Fallstricke

Kein Konstruktor: new SVGRect() wirft einen TypeError. Verwende dafür new DOMRect() oder SVGSVGElement.prototype.createSVGRect().
Lokale Koordinaten: getBBox() berücksichtigt keine transform-Attribute und keine Strichbreite (stroke). Für Bildschirmkoordinaten brauchst du getBoundingClientRect() oder eine Umrechnung mit getScreenCTM().
Nur für gerenderte Elemente: Bei Elementen, die nicht im DOM hängen oder mit display: none ausgeblendet sind, liefert getBBox() Nullwerte. Firefox wirft in diesem Fall sogar eine Ausnahme.
Live-Objekt: viewBox.baseVal ist direkt mit dem Attribut verknüpft. Änderungen an x, y, width und height wirken also sofort auf die Darstellung. Hat das Element kein viewBox-Attribut, sind alle Werte 0.
Kompatibilität: Das globale SVGRect gibt es in allen modernen Browsern als Alias für DOMRect. In sehr alten Browsern (ältere Safari- und IE-Versionen) war es eine eigene Schnittstelle ohne top/right/bottom/left. Prüfungen mit instanceof DOMRect sind dort unzuverlässig.

Siehe auch

DOMRect DOMRectReadOnly SVGGraphicsElement.getBBox() SVGSVGElement.createSVGRect() Element.getBoundingClientRect() SVGAnimatedRect