SVGRectElement.width — Eigenschaft · JavaScript-Referenz

Signatur

get SVGRectElement.width

Beschreibung

Die Eigenschaft width von SVGRectElement gibt das Attribut width eines <rect>-Elements als SVGAnimatedLength zurück. Die Eigenschaft selbst ist schreibgeschützt. Das zurückgegebene Objekt enthält aber zwei SVGLength-Werte: baseVal (der im Markup oder per Skript gesetzte Wert, veränderbar) und animVal (der aktuelle Wert während einer SMIL-Animation, nur lesbar).

Über baseVal.value erhältst du die Breite in Benutzereinheiten (User Units). baseVal.valueInSpecifiedUnits und baseVal.unitType geben dir den Wert in der ursprünglich angegebenen Einheit, zum Beispiel % oder em. Mit baseVal.newValueSpecifiedUnits() oder convertToSpecifiedUnits() kannst du Einheiten gezielt setzen oder umrechnen.

Typische Einsatzfälle sind interaktive Diagramme, Balkengrafiken, Fortschrittsbalken oder Editoren, bei denen du Rechteckbreiten typsicher auslesen und ändern willst, ohne Attribut-Strings selbst zu zerlegen. Seit SVG 2 ist width auch eine CSS-Geometrie-Eigenschaft. Ein per CSS gesetzter Wert hat daher Vorrang vor dem Attribut.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbares SVGLength) und animVal (nur lesbares SVGLength mit dem aktuell animierten Wert).

Beispiele

Breite eines Rechtecks auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '120');
rect.setAttribute('height', '40');
svg.append(rect);
document.body.append(svg);

console.log(rect.width.baseVal.value);   // Wert in Benutzereinheiten
console.log(rect.width.animVal.value);   // aktueller (animierter) Wert
console.log(rect.width instanceof SVGAnimatedLength);

120 120 true

Fortschrittsbalken per baseVal aktualisieren

// <svg width="200" height="20"><rect id="bar" width="0" height="20" fill="teal"/></svg>
const bar = document.querySelector('#bar');
const maxWidth = 200;

const setProgress = (percent) => {
  const clamped = Math.min(100, Math.max(0, percent));
  bar.width.baseVal.value = (maxWidth * clamped) / 100;
};

setProgress(65);
console.log(bar.getAttribute('width'));

130

Mit Einheiten arbeiten

const rect = document.querySelector('rect');
const len = rect.width.baseVal;

// Breite auf 50 % setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(len.valueAsString);                         // "50%"
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

// In Pixel/Benutzereinheiten umrechnen (hängt vom Viewport ab)
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(len.valueAsString);

50% true "100px" (bei 200 px breitem Viewport)

// Wichtig · Fallstricke

Nicht direkt zuweisen: rect.width = 100 bewirkt nichts (im Strict-Modus gibt es einen TypeError). Setze stattdessen rect.width.baseVal.value oder nutze setAttribute('width', …).
animVal ist nur lesbar: Ein Schreibversuch auf animVal wirft einen NoModificationAllowedError.
CSS hat Vorrang: Wird width per CSS gesetzt (SVG 2), spiegelt baseVal weiterhin nur das Attribut wider. Die tatsächlich dargestellte Größe liefert getBBox() oder getComputedStyle().
Relative Einheiten: Prozent- oder em-Werte lassen sich nur umrechnen, wenn das Element im Dokument hängt und einen Viewport hat. Andernfalls kann value 0 sein oder eine Ausnahme auftreten.
Negative Breiten sind ein Fehler, das Rechteck wird dann nicht gezeichnet. Bei 0 wird es ebenfalls nicht gerendert.
Kompatibilität: Wird von allen modernen Browsern unterstützt. SMIL-Animationen (animVal ≠ baseVal) funktionieren in Chromium, Firefox und Safari.

Siehe auch

SVGRectElement SVGRectElement.height SVGRectElement.x SVGRectElement.y SVGAnimatedLength SVGLength SVGGraphicsElement.getBBox()