Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 13   

13.8 Animierte Farbveraenderungen - animateColor

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>
      



index  |  Kapitel 13  |  13.7  <<  | 13.8 |  >>  13.9   Animierte Transformationen - animateTransform