Animaties

In svg is het mogelijk objecten te animeren. Een van de attributen van een tag wordt dan door een van de onderstaande tags aangepast. Er bestaan vier animatie-tags:
  1. De <animate />-tag
  2. De <animateTransform />-tag
  3. De <animateMotion>-tag
  4. De <animateColor>-tag
  5. De <set>-tag

De tag <animate />

Voor een normale animatie gebruikt u <animate />. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
attributeName ja attribuut Naam van het attribuut dat wordt geanimeerd
begin ja tijd (s) / load / id.click Begin van de animatie.
dur ja tijd (s) Duur van de animatie
from nee waarde van een attribuut Beginwaarde van de animatie.
to nee waarde van een attribuut. Eindwaarde van de animatie.
values nee Waarden van een attribuut door een ;-teken gescheiden. Waarden van de animatie.
repeatCount nee getal / indefinite Aantal keer dat de animatie herhaald wordt.
fill nee freeze Als de animatie stopt, dan blijft het geanimeerde object op dezelfde plaats staan.

Bijvoorbeeld: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<defs>
<g id="a">
<path d="M25 172L11 167L0 158L10 138L28 132L31 134L56 119C52 116 44 107 60 58L30 57C20 61 9 78 2 100C3 78 13 50 33 41L67 46L71 34L56 32L49 35L52 29L73 29C73 20 70 10 65 0C78 9 83 21 86 26L106 18L107 21L88 30L89 33L101 34L103 38L96 37L92 40L94 43L99 42L100 45L90 48L89 53C104 56 120 69 121 74L124 80L119 83C108 71 95 68 84 68L111 88L105 92L77 75C75 82 68 88 67 97C69 104 92 102 125 99C130 100 130 124 127 149L121 144C117 149 99 159 69 156C62 159 47 175 44 175L41 171L69 136L76 129C69 127 61 123 64 124L37 139L34 154L35 155ZM93 102L175 41L179 45L102 102ZM89 156L90 168L86 168L87 175C91 181 97 186 99 187L102 182L92 167L95 167L95 155ZM104 153L107 157L102 161L107 165L124 164L118 156L112 156L110 151" fill="black" />
</g>
</defs>
<g>
<image height="200" width="200" x="0" y="0" xlink:href="maan.jpg" />
<use x="0" y="10" transform="scale(0.9)" xlink:href="#a">
<animate attributeName="x" from="-200" to="200" begin="load" dur="10s" repeatDur="indefinite" />
</use>
</g>
</svg>
(Bekijk dit voorbeeld).

Let op!
Batik SVG Viewer ondersteunt geen animaties!


De tag <animateTransform />

De tag <animateTransform /> gebruikt u als u transformaties wilt animeren. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
attributeName ja attribuut Naam van het attribuut dat wordt geanimeerd. Bij de <animateTransform />-tag moet dit transform zijn.
begin ja tijd (s) / load / id.click Begin van de animatie.
dur ja tijd (s) Duur van de animatie
from nee waarde van een attribuut Beginwaarde van de animatie.
to nee waarde van een attribuut. Eindwaarde van de animatie.
values nee Waarden van een attribuut door een ;-teken gescheiden. Waarden van de animatie.
repeatCount nee getal / indefinite Aantal keer dat de animatie herhaald wordt.
fill nee freeze Als de animatie stopt, dan blijft het geanimeerde object op dezelfde plaats staan.
type ja Een transformatie. De transformatie die moet worden geanimeerd.

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="160px" height="80px">
<rect x="0" y="0" height="100%" width="100%" fill="#0ebb00" />
<g font-family="Comic Sans MS" font-size="18" fill="black">
<g transform="translate(40,50) rotate(-60)">
<rect x="-25" y="-10" width="55" height="20" rx="8" fill="none" stroke="red" stroke-width="3" />
<text x="-20" y="7" font-size="20">
SVG </text>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" additive="sum" dur="4s" repeatDur="indefinite"/>
</g>
<text x="5" y="20">
This site is </text>
<text x="80" y="60">
powered </text>
</g>
</svg>
(Bekijk dit voorbeeld)

De tag <animateMotion />

De <animateMotion />-tag gebruikt u om objecten over een path te laten bewegen. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
path ja path data path data waarover het object moet bewegen.
begin ja tijd (s) / load / id.click Begin van de animatie.
dur ja tijd (s) Duur van de animatie
repeatCount nee getal / indefinite Aantal keer dat de animatie herhaald wordt.
fill nee freeze Als de animatie stopt, dan blijft het geanimeerde object op dezelfde plaats staan.

Mogelijke subtags:
mpath

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<defs>
</defs>
<g>
<path d="M25 172L11 167L0 158L10 138L28 132L31 134L56 119C52 116 44 107 60 58L30 57C20 61 9 78 2 100C3 78 13 50 33 41L67 46L71 34L56 32L49 35L52 29L73 29C73 20 70 10 65 0C78 9 83 21 86 26L106 18L107 21L88 30L89 33L101 34L103 38L96 37L92 40L94 43L99 42L100 45L90 48L89 53C104 56 120 69 121 74L124 80L119 83C108 71 95 68 84 68L111 88L105 92L77 75C75 82 68 88 67 97C69 104 92 102 125 99C130 100 130 124 127 149L121 144C117 149 99 159 69 156C62 159 47 175 44 175L41 171L69 136L76 129C69 127 61 123 64 124L37 139L34 154L35 155ZM93 102L175 41L179 45L102 102ZM89 156L90 168L86 168L87 175C91 181 97 186 99 187L102 182L92 167L95 167L95 155ZM104 153L107 157L102 161L107 165L124 164L118 156L112 156L110 151" fill="none" stroke="black" />
<circle cx="0" cy="0" r="4" fill="green">
<animateMotion path="M25 172L11 167L0 158L10 138L28 132L31 134L56 119C52 116 44 107 60 58L30 57C20 61 9 78 2 100C3 78 13 50 33 41L67 46L71 34L56 32L49 35L52 29L73 29C73 20 70 10 65 0C78 9 83 21 86 26L106 18L107 21L88 30L89 33L101 34L103 38L96 37L92 40L94 43L99 42L100 45L90 48L89 53C104 56 120 69 121 74L124 80L119 83C108 71 95 68 84 68L111 88L105 92L77 75C75 82 68 88 67 97C69 104 92 102 125 99C130 100 130 124 127 149L121 144C117 149 99 159 69 156C62 159 47 175 44 175L41 171L69 136L76 129C69 127 61 123 64 124L37 139L34 154L35 155ZM93 102L175 41L179 45L102 102ZM89 156L90 168L86 168L87 175C91 181 97 186 99 187L102 182L92 167L95 167L95 155ZM104 153L107 157L102 161L107 165L124 164L118 156L112 156L110 151z" begin="load" dur="40s" repeatDur="indefinite" />
</circle>
</g>
</svg>
(Bekijk dit voorbeeld)

De tag <animateColor />

Als u een kleur wilt animeren gebruikt u <animateColor />. Deze tag heeft dezelfde attributen als animate.
Bijvoorbeeld: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="0" y="0" width="100%" height="100%" fill="white" stroke="blue" stroke-width="1" />
<rect x="10" y="10" width="40" height="40" fill="yellow" stroke="#0ebb00" stroke-width="4">
<animateColor attributeName="fill" from="yellow" to="#0ebb00" begin="load" dur="8s" fill="freeze" />
<animateColor attributeName="stroke" from="#0ebb00" to="yellow" begin="load" dur="8s" fill="freeze" />
</rect>
</g>
</svg>
(Bekijk dit voorbeeld).

De tag <set />

De <set />-tag dient om een attribuut tijdelijk een andere waarde te geven. Deze tag heeft dezelfde attributen als de <animate />-tag (begin, attributeName, dur) en het volgende attribuut:
Attribuut Verplicht waarde van het attribuut uitleg
to ja waarde van een attribuut Waarde die het attribuut een bepaalde tijd moet hebben.

Bijvoorbeeld: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="0" y="0" width="100%" height="100%" fill="white" stroke="blue" stroke-width="1" />
<rect x="10" y="10" width="40" height="40" fill="yellow" stroke="#0ebb00" stroke-width="4">
<set attributeName="width" begin="2s" dur="4s" to="80" />
</rect>
</g>
</svg>
(Bekijk dit voorbeeld).

Ga naar het volgende hoofdstuk: Scripts in SVG Valid XHTML 1.0!