s'utilise pour animer un seul attribut, ou une seule propriété, au cours du temps.
offre un moyen simple pour le paramétrage de une seule valeur d'attribut pour une durée spécifiée.
anime un attribut de transformation sur un élément cible, permettant de ce fait aux animations de contrôler translation, changement d'échelle, rotation et/ou inclinaison.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="200" height="100"
style="fill:#CCCCFF;stroke:#000099">
<animate attributeName="x" attributeType="XML"
begin="0s" dur="5s" from="50" to="300" fill="freeze"/ >
</rect>
<text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
Hello. Let's show a crawling rectangle ! </text>
</svg>
<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg" >
attributeType = "CSS | XML | auto"
Ci-dessous, on anime l'attribut "x" (la position x) d'un rectangle et c'est du type XML (SMIL):
<animate attributeName ="x" attributeType="XML"
Voici qqs. exemples qui marchent:
02:30:03 = 2 heures, 30 minutes et 3 secondes
50:00:10.25 = 50 heures, 10 secondes et 250 millisecondes
02:33 = 2 minutes et 33 secondes
00:10.5 = 10.5 secondes = 10 secondes et 500 millisecondes
3.2h = 3.2 heures = 3 heures et 12 minutes
45min = 45 minutes
30s = 30 secondes
5ms = 5 millisecondes
12.467 = 12 secondes et 467 millisecondes
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum"/>
</rect>
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum" accumulate="sum" repeatCount="5"/>
</rect>
<rect x="50" y="50" width="20px" height="20px"
style="fill:yellow;stroke:black">
<animate attributeName="width" dur="5s" repeatCount="5"
fill="freeze"
from="0px" to="20px"
additive="sum" accumulate="sum"/>
</rect>
<text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
Hello. Let's show a growing rectangle ! </text>
<rect x="50" y="50" width="200" height="100" style="fill:#CCCCFF;stroke:#000099"
visibility ="hidden" >
<set attributeName="visibility" attributeType="XML"
begin="4s" dur="5s" to="visible"/>
</rect>
<rect style="fill:yellow;stroke:#000099" x="250" y="50" width="200" height="100" opacity="0" >
<animate attributeName="opacity" attributeType="XML"
begin="1s" dur="5s" from="0" to="1" fill="freeze" />
</rect>
<svg height="900" width="900">
<!-- un gros rectangle qui remplit l'écran -->
<rect style="fill:#000000; " height="900" width="900" y="0" x="0">
<animate fill="freeze" dur="5s" begin="0.1s" to="#FFFFFF" from="#000000" calMode="linear" attributeName="fill "/>
</rect>
<!-- représentation d'une tige (rectangle haut et fin) -->
<rect style="fill :#CC9933;stroke:#CC9933" width="20" height="500"
ry="5" rx="5" y="100" x="400">
<animate dur="5s" begin="1s" to="#000000" from="#CC9933" calMode="linear" attributeName="fill "/>
<animate dur="5s" begin="6s" from="#000000" to="#CC9933" calMode="linear" attributeName="fill "/>
</rect>
<title>Simple rotation example</title>
<desc> Rotation with a grouping node </desc>
<g>
<rect x="50" y="50" rx="5" ry="5" width="200" height="100"
style="fill:#CCCCFF;stroke:#000099"/>
<text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
Hello. Let's rotate</text>
<animateTransform attributeName="transform" type="rotate"
values="0 150 100; 360 150 100"
begin="0s" dur="5s" />
</g>
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Definit l'animation sur le trace de mouvement -->
<animateMotion dur="6s" repeatCount="indefinite"
path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
</path>