SVGRect.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGRect.height

Beschreibung

Die Eigenschaft height eines SVGRect-Objekts gibt die Höhe eines Rechtecks im Benutzerkoordinatensystem (user units) an. Seit SVG 2 ist SVGRect nur noch ein Alias für DOMRect, deshalb verhält sich height genauso wie DOMRect.height.

SVGRect-Objekte bekommt man vor allem über SVGGraphicsElement.prototype.getBBox() (die Begrenzungsbox eines Elements), über SVGSVGElement.prototype.createSVGRect() und über animierte Attribute wie viewBox.baseVal bzw. viewBox.animVal. Mit height kann man Elemente vertikal ausrichten, Beschriftungen positionieren oder den sichtbaren Bereich eines <svg> anpassen.

Ob sich der Wert schreiben lässt, hängt davon ab, woher das Objekt stammt. Bei viewBox.baseVal wirkt ein Schreibzugriff direkt auf das Attribut viewBox. Bei viewBox.animVal ist das Objekt dagegen schreibgeschützt. Das Ergebnis von getBBox() ist nur eine Momentaufnahme: Wer dort height ändert, verändert das Element nicht.

Beispiele

Höhe der Begrenzungsbox eines Textes auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '40');
text.setAttribute('font-size', '24');
text.textContent = 'Hallo SVG';
svg.append(text);
document.body.append(svg);

// getBBox() funktioniert nur bei gerenderten Elementen
const box = text.getBBox();
console.log(`Texthöhe: ${box.height.toFixed(1)}`);

Texthöhe: 27.6 (abhängig von der Schriftart)

viewBox-Höhe ändern (vertikaler Zoom)

const svg = document.querySelector('svg');
svg.setAttribute('viewBox', '0 0 200 100');

const vb = svg.viewBox.baseVal;
console.log(vb.height); // 100

// Halbiert die sichtbare Höhe: der Inhalt wird vertikal vergrößert dargestellt
vb.height = 50;
console.log(svg.getAttribute('viewBox'));

100 0 0 200 50

Hintergrund-Rechteck passend unter ein Element legen

const NS = 'http://www.w3.org/2000/svg';
const label = document.querySelector('#label'); // ein <text>-Element
const { x, y, width, height } = label.getBBox();
const padding = 4;

const bg = document.createElementNS(NS, 'rect');
bg.setAttribute('x', x - padding);
bg.setAttribute('y', y - padding);
bg.setAttribute('width', width + padding * 2);
bg.setAttribute('height', height + padding * 2);
bg.setAttribute('fill', '#ffe08a');

// Hintergrund vor dem Text einfügen, damit er dahinter liegt
label.before(bg);

Neues SVGRect erzeugen

const svg = document.querySelector('svg');
const rect = svg.createSVGRect();
rect.width = 120;
rect.height = 80;

console.log(rect.height);              // 80
console.log(rect instanceof DOMRect);  // true in modernen Browsern

80 true

// Wichtig · Fallstricke

Nur Momentaufnahme: Das Objekt von getBBox() ist nicht mit dem Element verbunden. Wer box.height ändert, verändert das Element nicht.
Schreibschutz: Bei viewBox.animVal ist height nicht beschreibbar. Ein Schreibzugriff löst einen Fehler vom Typ NoModificationAllowedError aus. Änderungen gehören deshalb an viewBox.baseVal.
Nicht gerenderte Elemente: getBBox() liefert bei Elementen, die nicht im Dokument hängen oder mit display: none ausgeblendet sind, oft 0. In Firefox kann der Aufruf in diesem Fall auch eine Ausnahme auslösen.
Einheiten: height gilt im lokalen Benutzerkoordinatensystem des Elements. Transformationen wie transform und die Skalierung durch viewBox werden nicht berücksichtigt. Für Bildschirm-Pixel eignet sich getBoundingClientRect().
Kompatibilität: Wird in allen modernen Browsern unterstützt. Dass SVGRect ein Alias für DOMRect ist, stammt aus SVG 2. Ältere Browser hatten dafür noch eine eigene Schnittstelle, der Wert von height verhält sich dort aber genauso.

Siehe auch

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