SVGSVGElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGSVGElement.width

Beschreibung

Die Eigenschaft width eines SVGSVGElement steht für das Attribut width eines <svg>-Elements. Sie gibt aber keine Zahl und keinen String zurück, sondern ein SVGAnimatedLength-Objekt. Dieses Objekt enthält zwei Werte: baseVal ist der Wert, der im Attribut steht. animVal ist der aktuelle Wert, der sich durch SMIL-Animationen wie <animate> gerade ändern kann.

Beide Werte sind vom Typ SVGLength. Ein SVGLength hat unter anderem folgende Eigenschaften:

value: die Länge umgerechnet in Benutzereinheiten (px)
valueInSpecifiedUnits: der Zahlenwert in der Einheit, die im Attribut angegeben ist
unitType: die Einheit, zum Beispiel SVG_LENGTHTYPE_PERCENTAGE
valueAsString: der Wert als Text, etwa "50%"

Mit den Methoden newValueSpecifiedUnits() und convertToSpecifiedUnits() kann man die Länge setzen oder in eine andere Einheit umrechnen.

Schreibgeschützt ist nur die Eigenschaft width selbst. Man kann ihr also kein neues Objekt zuweisen. Über width.baseVal lässt sich die Breite trotzdem ändern, und das Attribut im DOM wird dabei sofort angepasst. Nützlich ist die Eigenschaft, wenn man die Größe einer SVG-Grafik per Skript auslesen oder ändern will, ohne Strings mit Einheiten selbst zu zerlegen, zum Beispiel für responsive Diagramme oder beim Export.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Wert des Attributs) und animVal (aktuell animierter Wert). Beide sind vom Typ SVGLength. Fehlt das Attribut, gilt der Standardwert 100%.

Beispiele

Breite eines SVG auslesen

// HTML: <svg id="chart" width="300" height="150"></svg>
const svg = document.getElementById('chart');
const { baseVal } = svg.width;

console.log(baseVal.value);          // in Benutzereinheiten (px)
console.log(baseVal.valueAsString);  // wie im Attribut
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

300 "300" true

Breite setzen, ohne Einheiten als String zusammenzubauen

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

// Breite auf 50 % setzen
svg.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);
console.log(svg.getAttribute('width'));

// Oder direkt in px über value
svg.width.baseVal.value = 640;
console.log(svg.getAttribute('width'));

"50%" "640"

Prozentwert in Pixel umrechnen

// HTML: <div style="width:800px"><svg id="s" width="25%"></svg></div>
const svg = document.getElementById('s');
const len = svg.width.baseVal;

console.log(len.valueAsString);       // "25%"
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(len.valueAsString);       // Wert jetzt in px

"25%" "200px"

// Wichtig · Fallstricke

Kein direkter Wert: svg.width ist ein Objekt. Code wie svg.width + 10 oder svg.width = 200 funktioniert nicht. Man muss immer über svg.width.baseVal.value gehen.
CSS wird nicht berücksichtigt: Die Eigenschaft spiegelt nur das Attribut wider. Ist die Breite per CSS gesetzt (etwa svg { width: 100% }), kann die tatsächlich gerenderte Breite davon abweichen. Die tatsächliche Größe liefern getBoundingClientRect() oder clientWidth.
Prozentwerte: Wie value bei Prozentangaben aufgelöst wird, hängt vom umgebenden Element ab. Bei Elementen, die nicht im Dokument eingehängt sind, kann das Ergebnis 0 sein oder eine Ausnahme auslösen.
animVal: In einigen Browsern ist animVal identisch mit baseVal, solange keine SMIL-Animation läuft. animVal ist schreibgeschützt; wer es ändert, löst eine Ausnahme aus.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Eigenschaft ist nur im Browser verfügbar, in Node.js nur mit einer DOM-Nachbildung wie jsdom. Diese Nachbildungen setzen SVGLength oft nur teilweise um.

Siehe auch

SVGSVGElement.height SVGSVGElement.x SVGSVGElement.y SVGAnimatedLength SVGLength SVGSVGElement HTMLSourceElement.width