SVGImageElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGImageElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGImageElement gibt ein SVGAnimatedLength-Objekt zurück, das dem width-Attribut (bzw. der gleichnamigen CSS-Geometrie-Eigenschaft) eines <image>-Elements entspricht. Sie legt die Breite des Rechtecks fest, in das die eingebundene Grafik gezeichnet wird.

Die Eigenschaft selbst ist schreibgeschützt – das zurückgegebene Objekt aber nicht: Über width.baseVal (ein SVGLength) liest und setzt man den im Attribut definierten Grundwert, etwa mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). width.animVal liefert den aktuellen, ggf. durch SMIL-Animation veränderten Wert und ist nur lesbar.

Typische Einsatzfälle sind das dynamische Skalieren von Bildern in SVG-Grafiken, das Auslesen der Größe für Layout-Berechnungen (z. B. Zentrieren über x/y) oder das Umrechnen von Einheiten wie % oder em in Benutzereinheiten.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

Breite eines SVG-Bildes auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttribute('href', 'logo.png');
img.setAttribute('width', '120');
svg.append(img);
document.body.append(svg);

console.log(img.width.baseVal.value);
console.log(img.width.baseVal.valueAsString);

120 120

Bild per Skript skalieren (Attribut wird mitgeändert)

const img = document.querySelector('svg image');

// Breite um 50 % vergrößern
img.width.baseVal.value *= 1.5;

// Das Attribut spiegelt die Änderung wider
console.log(img.getAttribute('width'));

180 (bei Ausgangswert 120)

Einheiten setzen und umrechnen

const img = document.querySelector('svg image');
const len = img.width.baseVal;

// Breite als Prozentwert des Viewports setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(len.valueAsString);      // "50%"

// Wert in Benutzereinheiten (px) – abhängig von der SVG-Größe
console.log(len.value);

50% z. B. 150 bei einem 300px breiten SVG

Bild im SVG horizontal zentrieren

const svg = document.querySelector('svg');
const img = svg.querySelector('image');

const svgWidth = svg.width.baseVal.value;
const imgWidth = img.width.baseVal.value;

img.x.baseVal.value = (svgWidth - imgWidth) / 2;
console.log(img.getAttribute('x'));

90 (bei 300 / 120)

// Wichtig · Fallstricke

Keine direkte Zuweisung: img.width = 200 hat keine Wirkung (bzw. wirft im Strict Mode einen TypeError). Immer über img.width.baseVal.value oder setAttribute('width', …) ändern.
Nicht verwechseln mit HTMLImageElement.width: Dort ist width eine einfache Zahl; bei SVG ist es ein SVGAnimatedLength-Objekt.
Fehlendes Attribut: Ohne width-Attribut liefert baseVal.value 0 – obwohl moderne Browser (SVG 2, auto) das Bild in seiner natürlichen Größe darstellen. Für die tatsächlich gerenderte Größe getBBox() oder getBoundingClientRect() verwenden.
CSS hat Vorrang: Wird width per CSS gesetzt, spiegelt baseVal weiterhin nur das Attribut wider.
Relative Einheiten: value bei %/em ist nur korrekt, wenn das Element im gerenderten Dokument hängt.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

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