|
Um eine Farbänderung animiert darzustellen, stellt SVG das
Element animateColor zur Verfügung.
In diesem Element können Sie alle Attribute aus den
Attributgruppen für Animationen verwenden.
Übrigens: Eine animierte Farbänderung ist mit dem
animate-Element ebenfalls möglich.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das animateColor-Element</title>
<desc>Animierte Farbänderungen</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:14px;
font-weight:bold; fill:black;}
]]>
</style>
</defs>
<!-- die Ampel -->
<rect id="kiste" x="20" y="20" width="60" height="160" fill="#333333" />
<circle id="k1" cx="50" cy="50" r="20"
style="fill:red; stroke:#eeeeee;" />
<circle id="k2" cx="50" cy="100" r="20"
style="fill:#333333; stroke:#eeeeee;" />
<circle id="k3" cx="50" cy="150" r="20"
style="fill:#333333; stroke:#eeeeee;" />
<!-- die Animation: Gesamtspieldauer 12 Sekunden -->
<!-- 2 mal mit animateColor -->
<animateColor xlink:href="#k1"
attributeName="fill"
begin="2" dur="2"
from="red" to="#333333"
fill="freeze" />
<animateColor xlink:href="#k2"
attributeName="fill"
begin="3" dur="3"
values="#333333;yellow;#333333"
fill="freeze" />
<!-- 1 mal mit animate -->
<animate xlink:href="#k3"
attributeName="fill"
begin="5" dur="2"
from="#333333" to="limegreen"
fill="freeze" />
<!-- 2 mal set: zurück zum Anfangszustand -->
<set xlink:href="#k1"
attributeName="fill"
begin="12" dur="indefinite"
to="red" />
<set xlink:href="#k3"
attributeName="fill"
begin="12" dur="indefinite"
to="#333333" />
</svg>
| 
