Scalable Vector Graphics/Animeren

Kleur animeren

We kunnen de kleuren animeren via de animateColor-tag. Hier wordt een kleur veranderd in een andere kleur, op een bepaald tijdstip en over een bepaalde periode. Bijvoorbeeld een verkeerslicht staat op groen en moet op rood komen te staan. Dit gebeurt door eerst op een oranje licht even op te laten lichten, en vervolgens over te gaan naar het rode licht.

Voorbeeld

<defs>
 <circle id="licht" r="50" />
</defs>
<path d="M5,105 C5,5 155,5 155,105 V335 C155,435 5,435 5,335 z" fill="black" />
<use x="80" y="100" xlink:href="#licht" fill="darkred">
 <animateColor attributeName="fill" attributeType="CSS"
  from="darkred" to="red"
  begin="6s" dur="1s" fill="freeze" />
</use>
<use x="80" y="220" xlink:href="#licht" fill="rgb(90, 50, 0)">
 <animateColor attributeName="fill" attributeType="CSS"
  from="rgb(90, 50, 0)" to="orange"
  begin="2s" dur="1s" fill="freeze" />
 <animateColor attributeName="fill" attributeType="CSS"
  from="orange" to="rgb(90, 50, 0)"
  begin="6s" dur="1s" fill="freeze" />
</use>
<use x="80" y="340" xlink:href="#licht" fill="green">
 <animateColor attributeName="fill" attributeType="CSS"
  from="green" to="rgb(0, 50, 0)"
  begin="2s" dur="1s" fill="freeze" />
</use>

Afbeelding

De afbeelding rechts toont de startfase van het verkeerslicht. Bekijk hier de geanimeerde versie. N.B.: Dit werkt niet in Firefox, wel in Opera.