Farben ändern

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

Farben von Elementen lassen sich über den Tag <animateColor> ändern. Er soll in folgendem Beispiel dazu dienen, die Farbe des zuvor schon bewegten Kreises zu ändern. Sie müssen dazu lediglich unterhalb des Tags <animateMotion> den Tag <animateColor> einfügen:

Dabei legen Sie wieder mit dur die Dauer fest, mit from die Anfangsfarbe und mit to die Endfarbe. Das Attribut attributeName benötigen Sie, um zu bestimmen, ob die Füllfarbe oder die Rahmenfarbe des Attributs geändert werden soll. Mit fill wird somit die Füllung manipuliert, an der Rahmenfarbe ändert sich nichts.

In diesem Fall wird also die Farbe von Rot in Gelb geändert. Die Endfarbe wird erreicht, wenn der Kreis die Zielposition erreicht hat, da diese Animation genauso lange dauert, wie die Animation für die Bewegung.

Hinweis:
Beide Tags, <animateMotion> und <animateColor>, verfügen über weitere Attribute, die unter Möglichkeiten zur Realisation von Animationen näher erläutert werden.