SVGRect.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGRect.width

Beschreibung

Die Eigenschaft width eines SVGRect enthält die Breite eines Rechtecks als Gleitkommazahl in Benutzereinheiten (user units) des jeweiligen SVG-Koordinatensystems. In aktuellen Spezifikationen (SVG 2 / Geometry Interfaces) ist SVGRect kein eigenes Interface mehr, sondern ein Alias für DOMRect. Deshalb verhält sich SVGRect.width genau wie DOMRect.width.

Solche Objekte bekommen Sie vor allem von SVGGraphicsElement.getBBox() (Begrenzungsrahmen eines Elements), von svgElement.viewBox.baseVal bzw. animVal (die viewBox eines <svg>- oder <symbol>-Elements) und von SVGSVGElement.createSVGRect().

Die Eigenschaft ist grundsätzlich les- und schreibbar. Ob sich eine Änderung auf das Dokument auswirkt, hängt davon ab, woher das Objekt stammt: Ein Wert aus viewBox.baseVal ist „live“ – wenn Sie width ändern, wird das Attribut viewBox sofort aktualisiert. Das Ergebnis von getBBox() ist dagegen nur eine Momentaufnahme. Wenn Sie es ändern, passiert im Dokument nichts.

Rückgabewert

Typ

number

Beschreibung

Die Breite des Rechtecks in Benutzereinheiten als Gleitkommazahl (unrestricted double). Beim Setzen wird der Wert in eine Zahl umgewandelt.

Beispiele

Breite eines Elements mit getBBox() messen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('width', '120');
rect.setAttribute('height', '40');
svg.append(rect);
document.body.append(svg); // getBBox() braucht ein gerendertes Element

const box = rect.getBBox();
console.log(box.width);

120

viewBox-Breite live ändern (Zoom)

const svg = document.querySelector('svg'); // <svg viewBox="0 0 200 100">
const vb = svg.viewBox.baseVal;

console.log(vb.width); // 200

// Um Faktor 2 hineinzoomen: sichtbarer Bereich halbiert
vb.width /= 2;
vb.height /= 2;

console.log(svg.getAttribute('viewBox'));

200 0 0 100 50

Textbreite messen und Hintergrund anpassen

const label = document.querySelector('#label');       // <text>
const bg = document.querySelector('#label-bg');       // <rect>

const { x, y, width, height } = label.getBBox();
const padding = 4;

bg.setAttribute('x', x - padding);
bg.setAttribute('y', y - padding);
bg.setAttribute('width', width + padding * 2);
bg.setAttribute('height', height + padding * 2);

console.log(`Textbreite: ${width.toFixed(1)}`);

Textbreite: 57.3

Neues Rechteck mit createSVGRect()

const svg = document.querySelector('svg');
const r = svg.createSVGRect();
r.width = 50;
r.height = 25;
console.log(r.width, r instanceof DOMRect);

50 true

// Wichtig · Fallstricke

Nicht mit SVGRectElement.width verwechseln: Beim Element <rect> liefert rectEl.width ein SVGAnimatedLength-Objekt und keine Zahl. Den Zahlenwert bekommen Sie über rectEl.width.baseVal.value.
Werte aus getBBox() sind Momentaufnahmen: Wenn Sie width ändern, ändert sich das Element nicht. Die Box enthält außerdem weder Transformationen noch Strichbreite (stroke-width). Für Bildschirmmaße einschließlich Transformationen nutzen Sie getBoundingClientRect().
getBBox() braucht ein gerendertes Element: Nicht eingehängte Elemente oder Elemente mit display: none liefern je nach Browser 0 oder werfen einen Fehler (ältere Firefox-Versionen).
Negative Werte: Anders als bei DOMRect-Werten aus dem Layout sind negative Breiten möglich. Eine viewBox mit negativer Breite ist aber ungültig, und das Element wird dann nicht gerendert.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. In älteren Browsern war SVGRect ein eigenes Interface, deshalb kann instanceof DOMRect dort false ergeben.

Siehe auch

SVGRect SVGRect.height SVGRect.x SVGRect.y DOMRect.width SVGGraphicsElement.getBBox() SVGSVGElement.createSVGRect() Element.getBoundingClientRect()