Scalable Vector Graphics/Animeren

SVG

Inleiding
  1. Groeperen van elementen
  2. Hergebruiken van figuren
  3. Gradiënten en patronen
  4. Stijl
  5. Transformaties
  6. Filters
  7. Animeren
  8. Scripten

Kleur animeren

bewerken

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

bewerken
<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

bewerken
 

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

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.