SVGLength.value — Eigenschaft · JavaScript-Referenz

Signatur

SVGLength.value

Beschreibung

Die Eigenschaft value des Interface SVGLength gibt die Länge als Zahl in Benutzereinheiten (user units, im Regelfall also CSS-Pixel im aktuellen Koordinatensystem) zurück. Wurde eine Länge z. B. als "2cm", "50%" oder "3em" angegeben, rechnet der Browser sie beim Lesen in Benutzereinheiten um.

Beim Schreiben wird die Zahl als Wert in Benutzereinheiten aufgefasst. Die ursprüngliche Einheit (unitType) bleibt dabei erhalten: Der Browser berechnet valueInSpecifiedUnits passend neu, sodass die Länge in der alten Einheit dem neuen Pixelwert entspricht. Das macht value ideal, wenn du mit berechneten Pixelwerten arbeiten willst, etwa bei Animationen, Drag-and-Drop oder Kollisionsberechnungen.

Typischerweise erreichst du ein SVGLength-Objekt über animierbare Attribute wie circle.r.baseVal, rect.width.baseVal oder über svg.createSVGLength(). Über baseVal kannst du schreiben, animVal ist dagegen schreibgeschützt und spiegelt den aktuell animierten Wert wider.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Beim Setzen: neuer Wert in Benutzereinheiten. Beim Lesen entfällt der Parameter.

Rückgabewert

Typ

number

Beschreibung

Die Länge als Gleitkommazahl in Benutzereinheiten (z. B. 75.59055 für 2cm bei 96 dpi).

Beispiele

Länge in Benutzereinheiten auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '2cm');
svg.append(rect);
document.body.append(svg);

const width = rect.width.baseVal;
console.log(width.valueInSpecifiedUnits); // Wert in der Originaleinheit
console.log(width.value.toFixed(2));      // umgerechnet in Pixel

2 75.59

Wert setzen – Einheit bleibt erhalten

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const length = svg.createSVGLength();
length.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM, 10);

length.value = 37.795275591; // entspricht ca. 10 mm → wir setzen den Pixelwert
console.log(length.unitType === SVGLength.SVG_LENGTHTYPE_MM);
console.log(length.valueInSpecifiedUnits.toFixed(1));
console.log(length.valueAsString);

true 10.0 10mm

Kreis animiert wachsen lassen

const svg = document.querySelector('svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '10');
svg.append(circle);

const radius = circle.r.baseVal;
const grow = () => {
  radius.value += 1; // direkt in Pixeln rechnen
  if (radius.value < 80) requestAnimationFrame(grow);
};
requestAnimationFrame(grow);
console.log(circle.getAttribute('r'));

10

// Wichtig · Fallstricke

Prozent- und Schriftgrößen-Einheiten: Bei %, em oder ex benötigt die Umrechnung einen Kontext (Viewport bzw. Schriftgröße). Für freistehende Objekte aus createSVGLength() oder nicht im Dokument eingehängte Elemente kann das Lesen/Setzen einen NotSupportedError werfen oder ungenaue Werte liefern.
animVal ist schreibgeschützt: Ein Schreibzugriff auf element.r.animVal.value löst einen NoModificationAllowedError aus. Schreibe immer über baseVal.
Nicht-endliche Werte (NaN, Infinity) führen zu einem TypeError.
Rundungsfehler: Durch die Umrechnung zwischen Einheiten entstehen Gleitkomma-Abweichungen – beim Vergleichen tolerant runden.
Für die Werte in der ursprünglichen Einheit ist valueInSpecifiedUnits zuständig, für die Textdarstellung valueAsString.
Kompatibilität: in allen modernen Browsern unterstützt; das Verhalten bei relativen Einheiten ohne Kontext unterscheidet sich teilweise zwischen den Engines.

Siehe auch

SVGLength SVGLength.valueInSpecifiedUnits SVGLength.valueAsString SVGLength.unitType SVGLength.prototype.newValueSpecifiedUnits() SVGLength.prototype.convertToSpecifiedUnits() SVGAnimatedLength SVGSVGElement.prototype.createSVGLength()