Mit animateColor Farben anpassen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Wie das erste Beispiel in diesem Kapitel schon gezeigt hat, können Sie mit dem Tag <animateColor> die Füll- oder Rahmenfarbe eines Elements animieren. Es verfügt lediglich über die Universalattribute für Animationen. Allerdings gibt es hier ein paar Besonderheiten zu beachten. Den Attributen from, by und to müssen Sie Farbwerte zuweisen und auch die values-Liste muss eine Liste von Farbwerten enthalten, die Sie mit Semikola trennen.

Geben Sie das values-Attribut an, können Sie damit die Farben bestimmen, die nacheinander angezeigt werden sollen. Wenn Sie jedoch die Anfangs- und Endfarbe mit from und to angeben, können Sie im Gegensatz zur values-Werteliste nicht bestimmen, welche Zwischenwerte verwendet werden. Das folgende Beispiel zeigt dies. Es verändert die Textfarbe bzw. die Randfarbe eines Textes mit Hilfe verschiedener Animationen.

In der ersten Animation wird die Farbe von Blau nach Rot überblendet und durch calcMode="discrete" erst nach Abschluss der Animation angezeigt. Die zweite Animation blendet die Farben ebenfalls von Blau nach Rot. Da hier aber calcMode nicht angegeben wird, sind die Überblendungen sichtbar.

Die dritte Animation verwendet das values-Attribut, um die einzelnen Farben zu definieren, und bestimmt mit dem keyTimes-Attribut, nach wie viel Sekunden das passieren soll. Die letzten beiden Animationen beziehen sich beide auf den letzten Text und verändern Füll- und Randfarbe in entgegengesetzte Richtung.

Hinweis:
Anstelle von Farbnamen können Sie selbstverständlich auch die rgb-Anweisung verwenden.