Scalable Vector Graphics/Animeren

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

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]

Svg-verkeerslicht.svg

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 http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.