SVGSetElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGSetElement extends SVGAnimationElement

Beschreibung

SVGSetElement ist die DOM-Schnittstelle des SVG-Elements <set>. Mit diesem Element setzt man ein Attribut oder eine CSS-Eigenschaft eines Zielelements für einen festgelegten Zeitraum auf einen bestimmten Wert. Anders als bei <animate> gibt es dabei keinen Übergang: Der Wert springt sofort auf den Wert aus to.

Die Schnittstelle bringt selbst keine eigenen Eigenschaften oder Methoden mit. Sie erbt alles von SVGAnimationElement, zum Beispiel targetElement, beginElement(), endElement(), getStartTime() und getCurrentTime(). Außerdem erbt sie über SVGElement und Element die üblichen DOM-Funktionen und die Ereignisse beginEvent, endEvent und repeatEvent.

Typische Einsatzfälle sind einfache Zustandswechsel in SVG-Grafiken ohne JavaScript: Hover-Effekte (begin="mouseover"), das Sichtbarmachen von Elementen zu einem bestimmten Zeitpunkt oder das Umschalten von Farben bei einem Klick. Per JavaScript erzeugt man das Element mit document.createElementNS() und dem SVG-Namensraum und startet es bei Bedarf mit beginElement().

Parameter

Name	Typ	Default	Beschreibung
$attributeName Pflicht	string		Content-Attribut: Name des Attributs oder der CSS-Eigenschaft, die gesetzt werden soll, z. B. `fill`.
$to Pflicht	string		Content-Attribut: Wert, der für die Dauer der Animation gilt.
$begin	string	0s	Content-Attribut: Startzeitpunkt, z. B. `2s`, `click` oder `indefinite` (Start nur über `beginElement()`).
$dur	string	indefinite	Content-Attribut: Dauer, z. B. `1s`.
$fill	"remove" \| "freeze"	remove	Content-Attribut: `freeze` behält den Wert nach Ende bei, `remove` stellt den Ausgangswert wieder her.
$href	string		Content-Attribut: Verweis auf das Zielelement (`#id`). Ohne Angabe wird das Elternelement animiert.

Rückgabewert

Typ

SVGSetElement

Beschreibung

Ein Objekt dieser Schnittstelle erhält man z. B. über document.createElementNS("http://www.w3.org/2000/svg", "set") oder querySelector("set").

Beispiele

Element per JavaScript erzeugen und per Klick starten

const SVG_NS = 'http://www.w3.org/2000/svg';
const rect = document.querySelector('#box');

const set = document.createElementNS(SVG_NS, 'set');
set.setAttribute('attributeName', 'fill');
set.setAttribute('to', 'crimson');
set.setAttribute('begin', 'indefinite');
set.setAttribute('dur', '2s');
rect.append(set);

console.log(set instanceof SVGSetElement);
rect.addEventListener('click', () => set.beginElement());

true

Vorhandenes <set>-Element auslesen

// <svg><circle id="dot" r="20" cx="30" cy="30" fill="gray">
//   <set attributeName="fill" to="gold" begin="mouseover" end="mouseout"/>
// </circle></svg>
const set = document.querySelector('#dot set');
console.log(set.constructor.name);
console.log(set.targetElement.id);
console.log(set.getAttribute('to'));

SVGSetElement dot gold

Auf Beginn und Ende reagieren

const set = document.querySelector('set');

set.addEventListener('beginEvent', () => console.log('Wert gesetzt'));
set.addEventListener('endEvent', () => console.log('Wert zurückgesetzt'));

set.beginElement();
// nach 1 Sekunde manuell beenden
setTimeout(() => set.endElement(), 1000);

Wert gesetzt Wert zurückgesetzt

// Wichtig · Fallstricke

Namensraum beachten: document.createElement('set') erzeugt ein HTMLUnknownElement und kein SVGSetElement. Verwende immer createElementNS() mit http://www.w3.org/2000/svg.
<set> kennt nur to, nicht from, by oder values. Zwischenwerte gibt es nicht.
beginElement() startet die Animation zuverlässig nur, wenn begin="indefinite" gesetzt ist oder der Startzeitpunkt nicht mit dem Zeitplan kollidiert.
Die SMIL-Animation wird in allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Chrome hatte SMIL eine Zeit lang als veraltet markiert, diese Ankündigung aber zurückgenommen. Für komplexe Animationen sind CSS-Animationen oder die Web Animations API oft besser geeignet.
Bei fill="remove" (Standard) springt der Wert nach Ende zurück. Nutze fill="freeze", damit der Wert bleibt.

Siehe auch

SVGRectElement SVGSVGElement SVGTextElement SVGUseElement SVGAElement