SVGAnimationElement.targetElement — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimationElement.targetElement

Beschreibung

Die schreibgeschützte Eigenschaft targetElement gibt es auf allen SVG-Animationselementen, also <animate>, <animateMotion>, <animateTransform> und <set>. Sie liefert das Element, auf das die Animation wirkt.

Das Zielelement wird so ermittelt:

Hat das Animationselement ein href-Attribut (bzw. das veraltete xlink:href), ist das Ziel das Element, auf das diese Referenz zeigt, z. B. href="#kreis".
Fehlt die Referenz, ist das Ziel das Elternelement des Animationselements.

Die Eigenschaft ist nützlich, wenn du per Skript herausfinden willst, welche Form gerade animiert wird. Das hilft etwa beim Debuggen, in Event-Handlern für beginEvent/endEvent oder wenn du am animierten Element zusätzliche Klassen oder Stile setzen willst, ohne die ID doppelt pflegen zu müssen.

Rückgabewert

Typ

SVGElement | null

Beschreibung

Das animierte SVGElement. null, wenn kein gültiges Ziel gefunden wird, z. B. weil href auf eine ID zeigt, die es nicht gibt.

Beispiele

Zielelement über das Elternelement ermitteln

// HTML:
// <svg width="120" height="120">
//   <circle id="kreis" cx="60" cy="60" r="20" fill="tomato">
//     <animate id="puls" attributeName="r" values="20;40;20" dur="2s" repeatCount="indefinite" />
//   </circle>
// </svg>

const anim = document.getElementById('puls');
const ziel = anim.targetElement;
console.log(ziel.tagName, ziel.id);

circle kreis

Zielelement über href-Referenz

// HTML:
// <svg width="200" height="100">
//   <rect id="balken" x="10" y="40" width="20" height="20" fill="steelblue" />
//   <animate id="wachsen" href="#balken" attributeName="width"
//            from="20" to="180" dur="3s" fill="freeze" />
// </svg>

const anim = document.getElementById('wachsen');
// Das Elternelement ist <svg>, das Ziel aber <rect> wegen href
console.log(anim.parentElement.tagName); // svg
console.log(anim.targetElement.id);      // balken

svg balken

Zielelement bei Start und Ende der Animation markieren

const animationen = document.querySelectorAll('animate, animateTransform, animateMotion, set');

animationen.forEach((anim) => {
  anim.addEventListener('beginEvent', () => {
    anim.targetElement?.classList.add('wird-animiert');
  });
  anim.addEventListener('endEvent', () => {
    anim.targetElement?.classList.remove('wird-animiert');
  });
});

Fehlende Referenz erkennen

// <animate id="kaputt" href="#gibtsNicht" attributeName="opacity" to="0" dur="1s" />
const anim = document.getElementById('kaputt');

if (!anim.targetElement) {
  console.warn(`Animation #${anim.id} hat kein gültiges Ziel.`);
}

Animation #kaputt hat kein gültiges Ziel.

// Wichtig · Fallstricke

Nur lesbar: Wenn du targetElement etwas zuweist, passiert nichts (im Strict Mode gibt es einen TypeError). Um das Ziel zu ändern, setze stattdessen das Attribut href, z. B. mit anim.setAttribute('href', '#neu').
href vs. xlink:href: SVG 2 verwendet das einfache href. Ältere Browser brauchen eventuell noch xlink:href. Sind beide gesetzt, hat href Vorrang.
Kann die Referenz nicht aufgelöst werden, ist der Wert null. Prüfe deshalb am besten mit optionaler Verkettung (?.).
Die Eigenschaft funktioniert nur bei deklarativen SMIL-Animationen. Mit CSS-Animationen oder der Web Animations API hat sie nichts zu tun. Dort bekommst du das Ziel über KeyframeEffect.target.
Browser-Kompatibilität: Chrome, Firefox, Safari und Edge (Chromium) unterstützen die Eigenschaft. Der alte Internet Explorer kann kein SMIL und kennt sie daher nicht.

Siehe auch

SVGAnimationElement SVGAnimationElement.beginElement() SVGAnimationElement.endElement() SVGAnimationElement.getStartTime() KeyframeEffect.target