Signatur
Beschreibung
Die Eigenschaft baseVal einer SVGAnimatedNumber enthält den Basiswert eines numerischen SVG-Attributs, also den Wert, der im Attribut selbst steht, ohne Einfluss laufender SMIL-Animationen wie <animate>. Solche Objekte liefern zum Beispiel SVGStopElement.offset, SVGGeometryElement.pathLength, SVGFETurbulenceElement.seed bzw. baseFrequencyX, SVGFEDisplacementMapElement.scale, SVGFEGaussianBlurElement.stdDeviationX oder die Koeffizienten k1–k4 von SVGFECompositeElement.
Anders als animVal, das nur gelesen werden kann, lässt sich baseVal auch setzen. Eine Zuweisung aktualisiert sofort das zugehörige Attribut im DOM. Das entspricht setAttribute(), nur dass du direkt mit einer Zahl arbeitest und keinen String mehr parsen oder zusammenbauen musst.
Nimm baseVal, wenn du numerische SVG-Werte typsicher auslesen oder per Skript ändern willst, etwa für interaktive Farbverläufe, Filterparameter oder Pfadlängen. Den Wert, der gerade tatsächlich dargestellt wird, liefert animVal.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value Pflicht | number | Nur beim Setzen: neuer Basiswert als endliche Gleitkommazahl (float). Er wird ins zugehörige Attribut zurückgeschrieben. |
Rückgabewert
0 für offset).Beispiele
Offset eines Verlaufsstopps auslesen und ändern
const svgNS = 'http://www.w3.org/2000/svg';
const stop = document.createElementNS(svgNS, 'stop');
stop.setAttribute('offset', '50%');
// Prozentangaben werden in einen Bruchteil umgerechnet
console.log(stop.offset.baseVal);
// Setzen schreibt das Attribut zurück
stop.offset.baseVal = 0.25;
console.log(stop.getAttribute('offset'));pathLength für eine Strich-Animation normieren
const path = document.querySelector('path');
// Pfadlänge auf 100 normieren, dann rechnen die Strichangaben in Prozent
path.pathLength.baseVal = 100;
path.style.strokeDasharray = '100';
path.style.strokeDashoffset = '100';
console.log(path.getAttribute('pathLength'));Filterstärke per Schieberegler steuern
const blur = document.querySelector('feGaussianBlur');
const slider = document.querySelector('#blur-range');
slider.addEventListener('input', () => {
const wert = Number(slider.value);
// stdDeviation kann zwei Werte haben, deshalb X und Y einzeln setzen
blur.stdDeviationX.baseVal = wert;
blur.stdDeviationY.baseVal = wert;
console.log(`Unschärfe: ${blur.stdDeviationX.baseVal}`);
});baseVal und animVal bei laufender SMIL-Animation
// <stop offset="0.2"><animate attributeName="offset" to="0.8" dur="2s" fill="freeze"/></stop>
const stop = document.querySelector('stop');
setTimeout(() => {
console.log('Basis:', stop.offset.baseVal);
console.log('Animiert:', stop.offset.animVal);
}, 2500);// Wichtig · Fallstricke
- Nur endliche Zahlen: Die Eigenschaft hat den IDL-Typ
float. Wenn duNaNoderInfinityzuweist, wirft sie einenTypeError. Strings werden stillschweigend in Zahlen umgewandelt:"abc"wird zuNaNund löst dann ebenfalls den Fehler aus. - Genauigkeit: Der Wert wird als 32-Bit-Gleitkommazahl gespeichert.
0.1kommt deshalb eventuell als0.10000000149011612zurück. Runde also, bevor du Werte vergleichst. - Attribute mit zwei Zahlen: Attribute wie
stdDeviationoderbaseFrequencywerden auf zwei Objekte aufgeteilt (…X/…Y). Setzt du nur einen Teil, wird das Attribut neu geschrieben. - Prozentwerte: Bei
offsetwird"50%"als0.5geliefert. Nach dem Setzen steht im Attribut die reine Zahl, das Prozentzeichen ist dann weg. - animVal: Ob
animValSMIL-Animationen wiedergibt, hängt vom Browser ab. CSS-Animationen und Transitions sind in keinem der beiden Werte zu sehen. - Kompatibilität: Wird von allen modernen Browsern unterstützt, auch von älteren Versionen seit SVG 1.1.