Signatur
Beschreibung
Die schreibgeschützte Eigenschaft baseVal eines SVGAnimatedNumberList-Objekts gibt ein SVGNumberList-Objekt zurück. Es enthält den Basiswert eines SVG-Attributs, das aus einer Liste von Zahlen besteht, also den Wert, der im Markup steht oder per Skript gesetzt wurde. Mögliche Animationen durch SMIL (<animate>) sind darin nicht berücksichtigt.
Solche Listen gibt es zum Beispiel bei folgenden Attributen:
rotatevon<text>und<tspan>(SVGTextPositioningElement.rotate)tableValuesvon<feFuncR>,<feFuncG>,<feFuncB>und<feFuncA>kernelMatrixvon<feConvolveMatrix>
„Schreibgeschützt“ heißt hier nur, dass du der Eigenschaft selbst kein neues Objekt zuweisen kannst. Die zurückgegebene Liste ist live und veränderbar: Mit getItem(), appendItem(), insertItemBefore(), replaceItem(), removeItem() und clear() änderst du direkt das zugrunde liegende Attribut. Das Attribut wird dabei automatisch neu geschrieben.
Die Eigenschaft eignet sich gut, wenn du Zahlenlisten gezielt auslesen oder einzelne Werte ändern willst, ohne den Attribut-String selbst zu zerlegen und neu zusammenzusetzen. Den aktuell sichtbaren, gegebenenfalls animierten Wert liefert dagegen animVal.
Rückgabewert
SVGNumber-Objekten. Jedes Objekt hat eine Eigenschaft value vom Typ number. Änderungen an der Liste werden sofort in das Attribut übernommen.Beispiele
Einzelne Drehwinkel eines Textes auslesen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const text = document.createElementNS(NS, 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '40');
text.setAttribute('rotate', '0 15 30 45');
text.textContent = 'Hallo';
svg.append(text);
document.body.append(svg);
const list = text.rotate.baseVal; // SVGNumberList
console.log(list.numberOfItems);
const winkel = Array.from(
{ length: list.numberOfItems },
(_, i) => list.getItem(i).value
);
console.log(winkel);Werte ändern und anhängen – das Attribut wird automatisch aktualisiert
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const text = document.createElementNS(NS, 'text');
text.setAttribute('rotate', '0 15 30 45');
text.textContent = 'Welt!';
svg.append(text);
document.body.append(svg);
const list = text.rotate.baseVal;
// Vorhandenen Eintrag direkt ändern
list.getItem(1).value = 90;
// Neuen Wert anhängen (SVGNumber kommt vom <svg>-Wurzelelement)
const zahl = svg.createSVGNumber();
zahl.value = 60;
list.appendItem(zahl);
console.log(text.getAttribute('rotate'));Farbkanal-Tabelle eines Filters umkehren (tableValues)
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const func = document.createElementNS(NS, 'feFuncR');
func.setAttribute('type', 'table');
func.setAttribute('tableValues', '0 0.25 1');
svg.append(func);
const list = func.tableValues.baseVal;
// Werte sichern, Liste leeren, umgekehrt wieder befüllen
const werte = [];
for (let i = 0; i < list.numberOfItems; i++) {
werte.push(list.getItem(i).value);
}
list.clear();
for (const v of werte.reverse()) {
const n = svg.createSVGNumber();
n.value = v;
list.appendItem(n);
}
console.log(func.getAttribute('tableValues'));// Wichtig · Fallstricke
- Live-Objekt:
baseValist keine Kopie. Jede Änderung an der Liste oder an einemSVGNumber-Eintrag schreibt das Attribut sofort neu. Brauchst du eine Momentaufnahme, kopiere die Werte in ein normales Array. - Keine Zuweisung:
el.rotate.baseVal = …wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einenTypeErroraus. Ändere stattdessen die Liste selbst oder setze das Attribut mitsetAttribute(). - Kein echtes Array:
SVGNumberListhat keine Array-Methoden wiemap. NutzenumberOfItems(in neueren Browsern auchlength) zusammen mitgetItem(). Ein Index außerhalb des Bereichs löst einenDOMExceptionvom TypIndexSizeErroraus. - Einträge wandern mit: Hängst du ein
SVGNumberan, das schon in einer anderen Liste steckt, wird es dort nach Spezifikation entfernt oder kopiert. Erzeuge neue Einträge am besten immer mitSVGSVGElement.createSVGNumber(). - animVal vs. baseVal: Während einer SMIL-Animation kann
animValvom Basiswert abweichen.baseValspiegelt die Animation nie wider. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Die Serialisierung des Attributs nach einer Änderung (Trennzeichen, Nachkommastellen) kann sich zwischen Browsern leicht unterscheiden.