SVGAnimatedTransformList.animVal Property — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedTransformList.animVal

Beschreibung

Die Eigenschaft animVal einer SVGAnimatedTransformList gibt eine schreibgeschützte SVGTransformList zurück. Sie enthält den Wert des Transformationsattributs, nachdem laufende SMIL-Animationen wie <animateTransform> angewendet wurden. Ohne aktive Animation entspricht animVal inhaltlich dem Basiswert baseVal.

Du erreichst die Schnittstelle über diese Eigenschaften:

SVGGraphicsElement.transform für das Attribut transform (z. B. bei <rect>, <g> oder <path>)
SVGGradientElement.gradientTransform für das Attribut gradientTransform
SVGPatternElement.patternTransform für das Attribut patternTransform

Mit animVal kannst du den aktuellen Animationszustand abfragen, etwa um Kollisionen zu prüfen, Koordinaten umzurechnen oder den Fortschritt einer animateTransform-Animation zu synchronisieren. Wenn du Transformationen ändern willst, benutze immer baseVal. Jeder Schreibzugriff auf animVal löst eine NoModificationAllowedError-DOMException aus.

Rückgabewert

Typ

SVGTransformList

Beschreibung

Eine schreibgeschützte, „lebende“ Liste von SVGTransform-Objekten mit dem aktuell animierten Wert des Attributs. Die Liste wird automatisch aktualisiert, sobald sich Attribut oder Animation ändern.

Beispiele

Transformationen eines Elements auslesen

// &lt;svg&gt;&lt;rect id="box" width="50" height="50" transform="translate(20 10) rotate(45)"/&gt;&lt;/svg&gt;
const box = document.getElementById('box');
const list = box.transform.animVal;

const typNamen = {
  [SVGTransform.SVG_TRANSFORM_MATRIX]: 'matrix',
  [SVGTransform.SVG_TRANSFORM_TRANSLATE]: 'translate',
  [SVGTransform.SVG_TRANSFORM_SCALE]: 'scale',
  [SVGTransform.SVG_TRANSFORM_ROTATE]: 'rotate'
};

for (let i = 0; i < list.numberOfItems; i++) {
  const t = list.getItem(i);
  console.log(typNamen[t.type], t.matrix.e, t.matrix.f, t.angle);
}

translate 20 10 0 rotate 0 0 45

Laufende animateTransform-Animation beobachten

// &lt;rect id="spinner" width="40" height="40"&gt;
//   &lt;animateTransform attributeName="transform" type="rotate"
//     from="0 20 20" to="360 20 20" dur="2s" repeatCount="indefinite"/&gt;
// &lt;/rect&gt;
const spinner = document.getElementById('spinner');
const ausgabe = document.getElementById('winkel');

const aktualisieren = () => {
  const anim = spinner.transform.animVal;
  const basis = spinner.transform.baseVal;
  const winkel = anim.numberOfItems > 0 ? anim.getItem(0).angle : 0;
  ausgabe.textContent = `Winkel: ${winkel.toFixed(1)}° (Basis-Einträge: ${basis.numberOfItems})`;
  requestAnimationFrame(aktualisieren);
};
requestAnimationFrame(aktualisieren);

Winkel: 137.4° (Basis-Einträge: 0) // Wert ändert sich laufend

Gesamtmatrix bestimmen, ohne die Liste zu verändern

const el = document.querySelector('#box');
const list = el.transform.animVal;

// consolidate() ist auf animVal verboten, deshalb Matrizen selbst multiplizieren
let gesamt = new DOMMatrix();
for (let i = 0; i < list.numberOfItems; i++) {
  gesamt = gesamt.multiply(list.getItem(i).matrix);
}

const punkt = new DOMPoint(0, 0).matrixTransform(gesamt);
console.log(`Ursprung liegt bei (${punkt.x}, ${punkt.y})`);

Ursprung liegt bei (20, 10)

Schreibzugriff schlägt fehl – baseVal verwenden

const el = document.querySelector('#box');
const svg = el.ownerSVGElement;
const skalierung = svg.createSVGTransform();
skalierung.setScale(2, 2);

try {
  el.transform.animVal.appendItem(skalierung);
} catch (err) {
  console.log(err.name);
}

// Richtig: Basiswert ändern
el.transform.baseVal.appendItem(skalierung);
console.log(el.getAttribute('transform'));

NoModificationAllowedError translate(20 10) rotate(45) scale(2 2) // genaue Schreibweise kann je nach Browser abweichen

// Wichtig · Fallstricke

Schreibgeschützt: appendItem(), insertItemBefore(), replaceItem(), removeItem(), clear(), initialize() und consolidate() lösen auf animVal eine NoModificationAllowedError aus. Auch die enthaltenen SVGTransform-Objekte kannst du nicht verändern.
Die CSS-Eigenschaft transform wird nicht berücksichtigt: Transformationen aus Stylesheets, CSS-Animationen oder der Web Animations API erscheinen weder in animVal noch in baseVal. Den tatsächlich angewendeten Wert liefern getComputedStyle(el).transform oder el.getCTM().
Uneinheitliche Browser: Manche Engines haben animVal lange als Spiegel von baseVal umgesetzt, ohne SMIL-Animationen einzurechnen. Deshalb ist getCTM() für präzise Positionsberechnungen robuster.
Die Liste ist „lebend“. Eine einmal geholte Referenz spiegelt spätere Änderungen wider. Brauchst du einen festen Zustand, kopiere die Matrizen (z. B. mit DOMMatrix.fromMatrix()).
In SVG 2 hat SVGTransformList zusätzlich length als Alias für numberOfItems. In älteren Browsern verwendest du besser numberOfItems.

Siehe auch

SVGAnimatedTransformList SVGTransformList SVGTransform SVGGraphicsElement.transform SVGGraphicsElement.getCTM()