SVGAnimatedInteger — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedInteger

Beschreibung

SVGAnimatedInteger wird von SVG-Elementen für Attribute vom Typ <integer> verwendet, die sich per SMIL-Animation (z. B. <animate>) verändern lassen. Man liest den Wert also nicht direkt als Zahl aus, sondern erhält ein Objekt mit zwei Eigenschaften:

baseVal – der Grundwert des Attributs als Ganzzahl. Er lässt sich lesen und schreiben. Wenn man ihn setzt, wird das zugehörige Content-Attribut im DOM mit aktualisiert.
animVal – der aktuell wirksame Wert, bei laufender Animation also der animierte Wert. Diese Eigenschaft ist schreibgeschützt. Ohne aktive Animation entspricht sie baseVal.

Typische Stellen, an denen das Interface vorkommt: SVGFETurbulenceElement.numOctaves sowie SVGFEConvolveMatrixElement.orderX, orderY, targetX und targetY. Das Interface ist vor allem nützlich, wenn man Filterparameter aus JavaScript heraus steuern will, ohne Attributstrings zu bauen und zu parsen.

Objekte dieses Typs erzeugt man nicht selbst, denn es gibt keinen öffentlichen Konstruktor. Man bekommt sie immer über die passende Eigenschaft eines SVG-Elements, und sie spiegeln den Zustand dieses Attributs live wider.

Rückgabewert

Typ

SVGAnimatedInteger

Beschreibung

Wird über Element-Eigenschaften wie numOctaves geliefert. Enthält baseVal: number (lesen und schreiben) und animVal: number (nur lesen).

Beispiele

numOctaves eines feTurbulence-Filters auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const turbulence = document.createElementNS(svgNS, 'feTurbulence');
turbulence.setAttribute('baseFrequency', '0.05');
turbulence.setAttribute('numOctaves', '3');

const octaves = turbulence.numOctaves; // SVGAnimatedInteger
console.log(octaves instanceof SVGAnimatedInteger);
console.log(octaves.baseVal, octaves.animVal);

true 3 3

Detailstufe per Schieberegler steuern

// HTML: <input type="range" id="detail" min="1" max="8" value="2">
//       <svg><filter id="noise"><feTurbulence id="turb" baseFrequency="0.02" numOctaves="2"/></filter></svg>
const turb = document.querySelector('#turb');
const slider = document.querySelector('#detail');

slider.addEventListener('input', () => {
  // Das Setzen von baseVal aktualisiert auch das Attribut im DOM
  turb.numOctaves.baseVal = Number(slider.value);
  console.log(turb.getAttribute('numOctaves'));
});

z. B. "5" nach dem Verschieben auf 5

Kernel-Größe einer feConvolveMatrix prüfen

const svgNS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(svgNS, 'feConvolveMatrix');
conv.setAttribute('order', '3 3');
conv.setAttribute('kernelMatrix', '0 -1 0 -1 5 -1 0 -1 0');

const { orderX, orderY } = conv;
const expected = orderX.baseVal * orderY.baseVal;
const actual = conv.getAttribute('kernelMatrix').trim().split(/\s+/).length;
console.log(`Kernel ${orderX.baseVal}x${orderY.baseVal}, gültig: ${expected === actual}`);

Kernel 3x3, gültig: true

// Wichtig · Fallstricke

Kein Konstruktor: Ein Aufruf von new SVGAnimatedInteger() löst einen TypeError aus.
animVal ist schreibgeschützt: Zuweisungen an animVal werden im nicht-strikten Modus stillschweigend ignoriert und lösen im Strict Mode einen TypeError aus. Änderungen gehören immer an baseVal.
Ganzzahlen: Beim Setzen von baseVal wird der Wert in einen long umgewandelt, Nachkommastellen werden also abgeschnitten (2.9 wird zu 2). Nicht-numerische Werte wie NaN ergeben 0.
CSS-Animationen: animVal berücksichtigt nur SMIL-Animationen. CSS-Animationen oder Web Animations fließen hier nicht ein.
Kompatibilität: Wird in allen modernen Browsern unterstützt. Die früheren Eigenschaften filterResX und filterResY von SVGFilterElement wurden entfernt und sollten nicht mehr verwendet werden.

Siehe auch

SVGAnimatedNumber SVGAnimatedLength SVGAnimatedEnumeration SVGFETurbulenceElement SVGFEConvolveMatrixElement