SVGAnimatedLengthList.baseVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedLengthList.baseVal

Beschreibung

baseVal ist eine schreibgeschützte Eigenschaft des Interfaces SVGAnimatedLengthList. Sie gibt ein SVGLengthList-Objekt zurück. Dieses Objekt steht für den Basiswert eines animierbaren Attributs, das eine Liste von <length>-, <percentage>- oder <number>-Werten erwartet. Typische Beispiele sind die Attribute x, y, dx und dy der Elemente <text> und <tspan>. Mit mehreren Werten lässt sich dort jedes Zeichen einzeln positionieren.

Der Basiswert ist genau das, was im Markup steht bzw. per setAttribute() gesetzt wurde. Laufende SMIL-Animationen (<animate>) ändern ihn nicht. Den aktuell angezeigten, animierten Wert liefert dagegen animVal.

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann ihr kein neues Objekt zuweisen. Die zurückgegebene Liste ist aber live und veränderbar. Methoden wie appendItem(), replaceItem(), removeItem(), clear() oder initialize() ändern das zugehörige Attribut sofort. Umgekehrt spiegeln sich Änderungen am Attribut direkt in der Liste wider. Das ist praktisch, wenn Positionen numerisch und mit Einheiten verarbeitet werden sollen, ohne Attribut-Strings selbst zu zerlegen.

Rückgabewert

Typ

SVGLengthList

Beschreibung

Eine live SVGLengthList mit SVGLength-Objekten für den nicht animierten Attributwert. Wichtige Eigenschaften und Methoden sind numberOfItems bzw. length und getItem(index). Jedes SVGLength hat unter anderem value (in Benutzereinheiten), unitType und valueAsString.

Beispiele

x-Positionen eines Textes auslesen

// <svg><text id="label" x="10 20 5em" y="30">ABC</text></svg>
const text = document.getElementById('label');
const list = text.x.baseVal; // SVGLengthList

for (let i = 0; i < list.numberOfItems; i++) {
  const len = list.getItem(i);
  console.log(i, len.valueAsString, len.unitType);
}

0 10 1 1 20 1 2 5em 3

Zeichen einzeln positionieren (Liste verändern)

const svg = document.querySelector('svg');
const text = document.getElementById('label');
const xs = text.x.baseVal;

xs.clear();
// Jedes Zeichen 15 Einheiten weiter rechts platzieren
[...text.textContent].forEach((_, i) => {
  const len = svg.createSVGLength();
  len.value = 10 + i * 15;
  xs.appendItem(len);
});

console.log(text.getAttribute('x'));

10 25 40

Basiswert und animierten Wert vergleichen

// <text id="t" x="10" y="40">Hallo
//   <animate attributeName="x" from="10" to="200" dur="2s" fill="freeze"/>
// </text>
const t = document.getElementById('t');

setTimeout(() => {
  console.log('baseVal:', t.x.baseVal.getItem(0).value);
  console.log('animVal:', t.x.animVal.getItem(0).value);
}, 2500);

baseVal: 10 animVal: 200

// Wichtig · Fallstricke

Nur lesend zuweisbar: text.x.baseVal = … schlägt fehl bzw. hat keine Wirkung. Ändern Sie stattdessen den Inhalt der Liste oder setzen Sie das Attribut mit setAttribute().
Leere Liste: Fehlt das Attribut, ist numberOfItems gleich 0. getItem(0) wirft dann einen IndexSizeError.
Objekte aus einer anderen Liste: Fügt man ein SVGLength ein, das schon zu einer anderen Liste gehört, wird laut Spezifikation eine Kopie eingefügt. Spätere Änderungen am ursprünglichen Objekt wirken sich dann nicht mehr aus.
Relative Einheiten: Bei Prozent- oder em-Werten hängt value vom Viewport bzw. von der Schriftgröße ab. Ist das Element nicht gerendert, kann der Wert 0 sein oder ungenau ausfallen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. SVGLengthList.length ist neuer als numberOfItems. Für ältere Umgebungen ist numberOfItems die sicherere Wahl.

Siehe auch

SVGAnimatedLengthList.animVal SVGAnimatedLengthList SVGLengthList SVGLength SVGSVGElement.createSVGLength() SVGTextPositioningElement SVGAnimatedTransformList.baseVal Property