SVGAnimatedLength.baseVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedLength.baseVal

Beschreibung

Die schreibgeschützte Eigenschaft baseVal einer SVGAnimatedLength-Schnittstelle gibt ein SVGLength-Objekt zurück. Es steht für den Basiswert eines Längenattributs, also den Wert, der im Attribut selbst steht, ohne Einfluss laufender SMIL-Animationen. (Anders als die MDN-Kurzbeschreibung behauptet, geht es hier um eine Länge und nicht um eine Aufzählung. Für Aufzählungen gibt es SVGAnimatedEnumeration.)

Solche Objekte bekommt man über Eigenschaften wie rect.width, rect.x, circle.r, circle.cx, line.x1 oder svg.height. Das zurückgegebene SVGLength ist live: Es spiegelt immer das aktuelle Attribut wider, und wer es ändert (etwa über value, valueInSpecifiedUnits, valueAsString, newValueSpecifiedUnits() oder convertToSpecifiedUnits()), schreibt das Attribut direkt ins DOM zurück.

Nützlich ist baseVal vor allem, wenn man Geometrie typsicher und mit Einheiten lesen oder setzen will, ohne Attribut-Strings von Hand zu zerlegen. Ein Beispiel ist die Umrechnung von mm oder % in Benutzereinheiten (px). Den gerade animierten Wert liefert dagegen animVal.

Rückgabewert

Typ

SVGLength

Beschreibung

Ein live verknüpftes, veränderbares SVGLength-Objekt mit den Eigenschaften unitType, value (in Benutzereinheiten), valueInSpecifiedUnits und valueAsString sowie den Methoden newValueSpecifiedUnits() und convertToSpecifiedUnits().

Beispiele

Länge und Einheit eines Rechtecks auslesen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '400');
svg.setAttribute('height', '200');
const rect = document.createElementNS(NS, 'rect');
rect.setAttribute('width', '50%');
rect.setAttribute('height', '20mm');
svg.append(rect);
document.body.append(svg); // für %-Umrechnung muss das Element im Dokument sein

const w = rect.width.baseVal;
console.log(w.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(w.valueInSpecifiedUnits, w.valueAsString);
console.log(w.value); // in Benutzereinheiten (px)
console.log(rect.height.baseVal.value.toFixed(2));

true 50 "50%" 200 75.59

Kreisradius per Skript animieren

const circle = document.querySelector('circle'); // <circle cx="50" cy="50" r="10" />
const r = circle.r.baseVal;

const pulse = (t) => {
  // Das Setzen von value schreibt das r-Attribut direkt zurück
  r.value = 10 + Math.sin(t / 300) * 5;
  requestAnimationFrame(pulse);
};
requestAnimationFrame(pulse);

setTimeout(() => console.log(circle.getAttribute('r')), 500);

z. B. "14.54"

Einheiten setzen und umrechnen

const line = document.querySelector('line'); // <line x1="0" ... />
const x1 = line.x1.baseVal;

// Wert in Millimetern setzen
x1.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM, 10);
console.log(line.getAttribute('x1'));

// In Pixel umrechnen; das Attribut wird dabei umgeschrieben
x1.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(x1.valueInSpecifiedUnits.toFixed(3));

// Alternativ als String setzen
x1.valueAsString = '2em';
console.log(x1.unitType === SVGLength.SVG_LENGTHTYPE_EMS);

"10mm" "37.795" true

// Wichtig · Fallstricke

Die Eigenschaft selbst ist schreibgeschützt: rect.width.baseVal = … hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern lassen sich nur die Eigenschaften des zurückgegebenen SVGLength-Objekts.
Live-Objekt: Wer eine Referenz auf baseVal speichert, sieht später auch Änderungen durch setAttribute(). Einen festen Wert erhält man nur über eine Kopie, z. B. const w = rect.width.baseVal.value.
baseVal oder animVal: Während einer SMIL-Animation (<animate>) bleibt baseVal auf dem Attributwert stehen. Den aktuell animierten Wert liest man über animVal, der nicht beschrieben werden kann.
CSS bleibt außen vor: In SVG 2 lassen sich Geometrie-Eigenschaften wie r, cx und width auch per CSS setzen. baseVal gibt aber nur das Attribut wieder, nicht den berechneten CSS-Wert. Den bekommt man über getComputedStyle() oder getBBox().
Relative Einheiten: Bei %, em und ex braucht value einen Layout-Kontext. Ist das Element nicht im Dokument eingehängt, können die Werte 0 oder ungenau sein, oder convertToSpecifiedUnits() wirft einen Fehler.
Ungültige Strings bei valueAsString lösen einen SyntaxError aus.
Kompatibilität: wird seit Langem in allen modernen Browsern unterstützt. In Node.js gibt es die Eigenschaft nur mit einer DOM-Umgebung, und jsdom setzt sie nur teilweise um.

Siehe auch

SVGAnimatedLength SVGAnimatedLength.animVal SVGLength SVGAnimatedEnumeration.baseVal SVGGraphicsElement.prototype.getBBox()