Signatur
Beschreibung
Die Eigenschaft baseVal der Schnittstelle SVGAnimatedInteger steht für den Basiswert eines ganzzahligen SVG-Attributs. Das ist der Wert, der im Markup steht oder per Skript gesetzt wurde, und zwar unabhängig davon, ob gerade eine SMIL-Animation (<animate>, <set>) läuft. Den gerade dargestellten, möglicherweise animierten Wert liefert die schreibgeschützte Schwester-Eigenschaft animVal.
SVGAnimatedInteger-Objekte bekommst du über bestimmte Eigenschaften von Filterelementen, vor allem:
SVGFETurbulenceElement.numOctaves(AttributnumOctaves)SVGFEConvolveMatrixElement.orderX/orderY(Attributorder)SVGFEConvolveMatrixElement.targetX/targetY(AttributetargetX/targetY)
baseVal kannst du lesen und schreiben. Wenn du einen Wert zuweist, ändert sich das zugehörige Inhaltsattribut im DOM entsprechend. Das Ergebnis ist also dasselbe wie bei setAttribute(), nur typisiert: Du arbeitest direkt mit einer Zahl und musst keinen String parsen. Deshalb eignet sich baseVal gut, um Filterparameter dynamisch anzupassen, etwa für Regler in einer Oberfläche.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | Nur beim Schreiben: der neue ganzzahlige Basiswert. Nach den WebIDL-Regeln für long werden Nachkommastellen abgeschnitten (2.9 → 2). |
Rückgabewert
long). Fehlt das Attribut, kommt der in der Spezifikation festgelegte Standardwert zurück, z. B. 1 für numOctaves.Beispiele
numOctaves einer feTurbulence lesen
const svgNS = 'http://www.w3.org/2000/svg';
const turbulence = document.createElementNS(svgNS, 'feTurbulence');
// Ohne Attribut gilt der Standardwert
console.log(turbulence.numOctaves.baseVal);
turbulence.setAttribute('numOctaves', '4');
console.log(turbulence.numOctaves.baseVal);Filterdetail per Schieberegler steuern
// HTML: <input type="range" id="detail" min="1" max="8" value="2">
// SVG: <filter id="noise"><feTurbulence id="turb" baseFrequency="0.05" numOctaves="2"/></filter>
const turb = document.getElementById('turb');
const slider = document.getElementById('detail');
slider.addEventListener('input', () => {
// baseVal schreiben ändert auch das Attribut im DOM
turb.numOctaves.baseVal = Number(slider.value);
console.log(turb.getAttribute('numOctaves'));
});baseVal und animVal bei laufender SMIL-Animation vergleichen
// <feTurbulence id="turb2" numOctaves="1">
// <animate attributeName="numOctaves" from="1" to="6" dur="3s" repeatCount="indefinite"/>
// </feTurbulence>
const turb2 = document.getElementById('turb2');
setInterval(() => {
const { baseVal, animVal } = turb2.numOctaves;
console.log(`Basis: ${baseVal}, animiert: ${animVal}`);
}, 1000);Nachkommastellen werden abgeschnitten
const conv = document.createElementNS('http://www.w3.org/2000/svg', 'feConvolveMatrix');
conv.targetX.baseVal = 2.9;
console.log(conv.targetX.baseVal, conv.getAttribute('targetX'));// Wichtig · Fallstricke
- baseVal oder animVal:
baseValzeigt nie den animierten Wert. Wenn du wissen willst, was gerade gerendert wird, liesanimVal. Das hat aber nur bei aktiver SMIL-Animation eine Wirkung, und in manchen Browsern gibtanimValauch dann denselben Wert wiebaseValzurück. - Umwandlung in eine Ganzzahl: Zugewiesene Werte werden nach WebIDL-
longumgewandelt. Nachkommastellen werden abgeschnitten,NaNwird zu0. Ungültige Werte wie negative Zahlen beinumOctaveslösen keinen Fehler aus. Sie können aber dazu führen, dass der Filter falsch oder gar nicht dargestellt wird. - orderX/orderY: Beide Werte gehören zum gemeinsamen Attribut
order. Wenn du einen davon änderst, kann sich die Schreibweise des Attributs ändern, z. B. von einem Einzelwert zu einem Wertepaar. - Browser-Kompatibilität:
baseValwird in allen modernen Browsern unterstützt. Die früherenSVGAnimatedInteger-EigenschaftenfilterResX/filterResYsind veraltet und wurden entfernt. - Das Element muss mit
createElementNS()im SVG-Namensraum erzeugt werden. MitcreateElement()fehlen die typisierten Eigenschaften.