Signatur
Beschreibung
Die Schnittstelle SVGAnimateColorElement steht im DOM für das SVG-1.1-Element <animateColor>. Das Element sollte Farbübergänge an Attributen oder Eigenschaften wie fill, stroke oder stop-color beschreiben, und zwar deklarativ über die SMIL-Attribute from, to, values, dur und repeatCount.
Eigene Eigenschaften oder Methoden hat die Schnittstelle nicht. Alles, was sie kann, erbt sie von SVGAnimationElement, etwa beginElement(), endElement(), getStartTime(), getCurrentTime(), getSimpleDuration() und targetElement. Darüber hinaus erbt sie von SVGElement und Element.
Wichtig: Schon in SVG 1.1 Second Edition wurde <animateColor> als veraltet markiert, und in SVG 2 ist es ganz entfallen. Das Element <animate> kann Farbwerte genauso gut animieren. Firefox und die Chromium-Browser haben <animateColor> nie unterstützt, und in WebKit wurde es entfernt. Für neue Projekte nimmt man deshalb <animate> (SVGAnimateElement), CSS-Animationen oder die Web Animations API.
Rückgabewert
<animateColor>-Element im DOM zurückgegeben. In aktuellen Browsern bekommt man stattdessen ein allgemeines SVGElement ohne Animationsfunktion.Beispiele
Unterstützung prüfen (Feature Detection)
// Gibt es die Schnittstelle überhaupt?
const hatInterface = typeof window.SVGAnimateColorElement !== 'undefined';
// Welche Klasse erzeugt der Browser für <animateColor>?
const el = document.createElementNS('http://www.w3.org/2000/svg', 'animateColor');
console.log('Interface vorhanden:', hatInterface);
console.log('Konstruktor:', el.constructor.name);Veraltetes Markup und moderner Ersatz mit <animate>
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '120');
svg.setAttribute('height', '120');
const kreis = document.createElementNS(svgNS, 'circle');
kreis.setAttribute('cx', '60');
kreis.setAttribute('cy', '60');
kreis.setAttribute('r', '50');
kreis.setAttribute('fill', 'red');
// Früher: <animateColor attributeName="fill" from="red" to="blue" .../>
// Heute: <animate> animiert Farben genauso
const anim = document.createElementNS(svgNS, 'animate');
anim.setAttribute('attributeName', 'fill');
anim.setAttribute('values', 'red;blue;red');
anim.setAttribute('dur', '3s');
anim.setAttribute('repeatCount', 'indefinite');
kreis.append(anim);
svg.append(kreis);
document.body.append(svg);
console.log(anim instanceof SVGAnimationElement);Alte <animateColor>-Elemente automatisch umschreiben
// Macht Legacy-SVGs lauffähig: <animateColor> wird zu <animate>
const migriereAnimateColor = (root = document) => {
const svgNS = 'http://www.w3.org/2000/svg';
root.querySelectorAll('animateColor').forEach((alt) => {
const neu = document.createElementNS(svgNS, 'animate');
for (const { name, value } of alt.attributes) {
neu.setAttribute(name, value);
}
alt.replaceWith(neu);
});
};
migriereAnimateColor();
console.log(document.querySelectorAll('animateColor').length);// Wichtig · Fallstricke
- Veraltet und entfernt:
<animateColor>ist in SVG 2 nicht mehr enthalten. Chrome, Edge und Firefox haben das Element nie umgesetzt, Safari/WebKit hat die Unterstützung entfernt. Echte Unterstützung gab es praktisch nur im alten Opera mit Presto-Engine. - Nicht unterstützte Elemente ignoriert der Browser stillschweigend. Es gibt keinen Fehler, die Animation läuft einfach nicht. Prüfe deshalb Legacy-SVGs gezielt.
- Als Ersatz eignen sich
<animate>mit denselben Attributen (attributeName,from,to,values,dur), CSS-@keyframesauffill/strokeoderElement.animate(). - Das Attribut
color-interpolationist bei SMIL-Farbanimationen nicht in allen Browsern gleich umgesetzt. Rechne mit Unterschieden beim Zwischenfarbton.