À zéro seconde
À trois secondes
À six secondes
À neuf secondesLe Web étant un média dynamique, SVG gère la possibilité de changer les graphiques vectoriels dans le temps. On peut animer un contenu SVG des façons suivantes :
Les éléments d'animation SVG ont été développés en collaboration avec le Groupe de Travail Multimédias Synchronisés du W3C (SYMM), les développeurs de la spécification du Langage d'Intégration Multimédia Synchronisé (SMIL) version 1.0 [SMIL1].
Le Groupe de Travail SYMM, en collaboration avec le Groupe de Travail SVG, a édité la spécification SMIL Animation [SMILANIM], qui représente un jeu de fonctions d'animation XML d'usage général. SVG incorpore les fonctions d'animation définies dans la spécification SMIL Animation et fournit des développements propres à SVG.
Pour une introduction à l'approche et aux fonctions disponibles pour tous les langages qui reconnaissent SMIL Animation, voir un aperçu de SMIL Animation et le modèle d'animation de SMIL Animation. Pour la liste des fonctions d'animation en sus de SMIL Animation, voir les extensions SVG à SMIL Animation.
SVG est un langage hôte, selon la terminologie de SMIL Animation, et, de ce fait, introduit des contraintes et des fonctions supplémentaires, comme cette spécification l'y autorise. Exceptées toutes les règles propres à SVG mentionnées explicitement dans cette spécification, la définition normative des éléments et des attributs d'animation de SVG se trouve dans la spécification SMIL Animation [SMILANIM].
SVG gère les quatre éléments d'animation suivants, définis dans la spécification SMIL Animation :
| 'animate' | permet aux attributs et aux propriétés scalaires de recevoir différentes valeurs au cours du temps | ||
| 'set' | un raccourci pratique pour l'élément 'animate', utile lors de l'assignation de valeurs d'animation à des attributs et propriétés non numériques, telle que la propriété 'visibility' | ||
| 'animateMotion' | déplace un élément le long d'un tracé de mouvement | ||
| 'animateColor' | modifie la valeur de couleur des attributs et des propriétés particuliers au cours du temps |
En supplément, SVG comprend les extensions à SMIL Animation compatibles suivantes :
| 'animateTransform' | modifie l'un des attributs de transformation de SVG au cours du temps, tel que l'attribut transform | ||
| l'attribut path | SVG autorise la spécification de toute fonction, issue de la syntaxe des données de tracé de SVG, dans l'attribut path d'un élément 'animateMotion' (SMIL Animation ne permet qu'un sous-ensemble de la syntaxe des données de tracé de SVG dans un attribut path) | ||
| 'mpath' element | SVG permet à un élément 'animateMotion' de contenir un élément enfant 'mpath', qui appelle un élément SVG 'path' comme définition du tracé de mouvement | ||
| l'attribut keyPoints | SVG ajoute un attribut keyPoints à l'élément 'animateMotion' pour offrir un contrôle précis des animations d'un tracé de mouvement | ||
| l'attribut rotate | SVG ajoute un attribut rotate à l'élément 'animateMotion' pour le contrôle automatique de la rotation d'un objet, de façon à ce que son axe-x se dirige dans la même direction (ou dans la direction opposée) que le vecteur tangent directionnel du tracé de mouvement |
Pour une compatibilité avec les autres aspects du langage, SVG utilise des références d'URI via un attribut xlink:href pour identifier les éléments cibles des animations.
SMIL Animation requiert du langage hôte qu'il définisse la signification pour le début de document et la fin de document. Comme un élément 'svg' est parfois la racine de l'arbre du document XML et, d'autre fois, comme il peut être un composant d'une grammaire XML parente, le début de document pour un fragment de document SVG donné est défini comme étant l'instant exact où l'événement onload de l'élément 'svg' est déclenché. La fin de document d'un fragment de document SVG correspond au point où le fragment de document SVG est libéré et n'est plus en cours de traitement par l'agent utilisateur.
Pour SVG, le terme instant de présentation indique une position sur le plan de déroulement par rapport au début de document d'un fragment de document donné.
SVG définit un traitement des erreurs plus contraignant que celui défini dans la spécification SMIL Animation [SMILANIM]. SMIL Animation définit un comportement pour le traitement des erreurs dans lequel le document poursuit sa course dans certaines situations d'erreur, alors que toutes les animations dans un fragment de document SVG vont s'interrompre pour toute erreur survenant dans le document (voir Le traitement des erreurs).
L'exempleanim01 ci-dessous illustre chacun des cinq éléments d'animation de SVG.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple anim01 - illustre les éléments d'animation</desc>
<rect x="1" y="1" width="798" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Ce qui suit montre l'utilisation de l'élément 'animate'
pour animer les attributs x,y et width d'un rectangle, ainsi le rectangle
croît jusqu'à finalement remplir la zone de visualisation. -->
<rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!-- Installe un nouveau système de coordonnées utilisateur pour que
l'origine du texte se trouve au point (0,0), permettant ainsi une rotation et
un changement d'échelle par rapport à la nouvelle origine. -->
<g transform="translate(100,100)" >
<!-- Ce qui suit montre l'utilisation des éléments 'set', 'animateMotion',
'animateColor' et 'animateTransform'. L'élément 'text' ci-dessous
est caché au départ (i.e., invisible). À 3 secondes, celui-ci :
* devient visible
* bouge en continu sur la diagonale de la zone de visualisation
* change de couleur, du bleu vers un rouge foncé
* pivote de -30 à zéro degrés
* change d'un facteur d'échelle de trois. -->
<text id="TextElement" x="0" y="0"
font-family="Verdana" font-size="35.27" visibility="hidden" >
Ça bouge !
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100"
begin="3s" dur="6s" fill="freeze" />
<animateColor attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
| À zéro seconde |
À trois secondes |
|
| À six secondes |
À neuf secondes |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les sections suivantes décrivent les divers attributs et éléments d'animation.
Les attributs suivants, communs à tous les éléments d'animation, identifient l'élément cible de l'animation.
<!ENTITY % animElementAttrs "%xlinkRefAttrs; xlink:href %URI; #IMPLIED" > |
Définitions des attributs :
Les attributs suivants identifient l'attribut ou la propriété cibles pour l'élément cible donné, dont la valeur change avec le temps.
<!ENTITY % animAttributeAttrs "attributeName CDATA #REQUIRED attributeType CDATA #IMPLIED" > |
Définitions des attributs :
attributeName a un préfixe XMLNS,
l'implémentation doit utiliser l'espace de nommage associé comme étant défini dans le champs de
l'élément cible. Cet attribut doit être défini comme étant animable dans cette
spécification.attributeName avec un attribut de l'élément
cible. L'implémentation doit rechercher en premier, dans la liste des propriétés CSS, un nom de
propriété qui correspond, puis, si aucun n'est trouvé, en rechercher un dans l'espace de nommage XML par
défaut de l'élément.
Les attributs suivants, communs à tous les éléments d'animation, contrôlent la synchronisation de l'animation, y compris ce qui entraîne le début ou la fin d'animation, la répétition, ou non, de l'animation et la conservation, ou non, de l'état final de l'animation une fois celle-ci achevée.
<!ENTITY % animTimingAttrs "begin CDATA #IMPLIED dur CDATA #IMPLIED end CDATA #IMPLIED min CDATA #IMPLIED max CDATA #IMPLIED restart (always | never | whenNotActive) 'always' repeatCount CDATA #IMPLIED repeatDur CDATA #IMPLIED fill (remove | freeze) 'remove'" > |
Dans les spécifications syntaxiques qui suivent, un blanc optionnel est indiqué par un « S », défini comme ceci :
S ::= (#x20 | #x9 | #xD | #xA)*
Définitions des attributs :
begin, soit end pour
indiquer la synchronisation avec le commencement ou avec la fin active de l'élément d'animation appelé.f(t).La spécification SMIL Animation [SMILANIM] définit en détails les règles de traitement associées aux attributs ci-dessus. Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la spécification SMIL Animation [SMILANIM] représente la définition normative des règles de traitement de ces attributs.
Les valeurs d'horloge ont la même syntaxe que dans SMIL Animation [SMILANIM], que l'on rappelle ici :
Clock-val ::= Full-clock-val | Partial-clock-val
| Timecount-val
Full-clock-val ::= Heures ":" Minutes ":" Secondes ("." Fraction)?
Partial-clock-val ::= Minutes ":" Secondes ("." Fraction)?
Timecount-val ::= Timecount ("." Fraction)? (Metric)?
Metric ::= "h" | "min" | "s" | "ms"
Heures ::= DIGIT+; tout nombre positif
Minutes ::= 2DIGIT; plage allant de 00 à 59
Secondes ::= 2DIGIT; plage allant de 00 à 59
Fraction ::= DIGIT+
Timecount ::= DIGIT+
2DIGIT ::= DIGIT DIGIT
DIGIT ::= [0-9]
Pour les valeurs Timecount, le suffixe métrique par défaut est "s" (pour secondes). Aucun blanc intermédiaire n'est admis dans les valeurs d'horloge, bien que les blancs de tête et de queue seront ignorés.
Les valeurs d'horloge décrive un instant de présentation.
Voici des exemples légaux de valeurs d'horloge :
02:30:03 50:00:10.25 = 50 heures, 10 secondes et 250 millisecondes
02:33 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 millisecondesLes valeurs fractionnelles sont juste des définitions décimales (en base 10) de secondes. Ainsi :
00.5s = 500 millisecondes
00:00.005 = 5 millisecondes
Les attributs suivants sont communs aux éléments 'animate', 'animateMotion', 'animateColor' et 'animateTransform'. Ces attributs définissent les valeurs assignées à l'attribut ou à la propriété cibles au cours du temps. Les attributs ci-dessous offrent un contrôle sur la synchronisation relative des images-clés et sur la méthode d'interpolation entre les valeurs discrètes.
<!ENTITY % animValueAttrs "calcMode (discrete | linear | paced | spline) 'linear' values CDATA #IMPLIED keyTimes CDATA #IMPLIED keySplines CDATA #IMPLIED from CDATA #IMPLIED to CDATA #IMPLIED by CDATA #IMPLIED" > |
Définitions des attributs :
calcMode
= "discrete | linear | paced | spline"calcMode est ignorée et une interpolation discrète
sera utilisée.discretelinearcalcMode.pacedpaced" est spécifiée, toutes les valeurs des attributs keyTimes ou keySplines
seront ignorées.
Pour l'élément 'animateMotion',
c'est la valeur par défaut de l'attribut calcMode.splinevalues sur la suivante, selon une fonction
temporelle définie par une spline de Bézier cubique. Les points de la spline sont
définis dans l'attribut keyTimes et les points de contrôle pour chaque intervalle sont définis
dans l'attribut keySplines.attributeType.
Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la
définition normative pour cet attribut est celle dans la spécification SMIL Animation
[SMILANIM].
Notamment, voir
SMIL Animation : l'attribut 'values'.
keyTimes
= "<liste>"values et définit quand la valeur est utilisée dans la fonction d'animation. Chaque
valeur de temps, dans la liste de l'attribut keyTimes, est spécifié en valeur décimale comprise
entre 0 et 1 (inclus), représentant un décalage proportionnel dans la durée simple de l'élément
d'animation.keyTimes, il doit y avoir exactement autant de valeur
dans cette liste keyTimes que dans la liste values.La sémantique de la liste de keyTimes dépend du mode d'interpolation :
keyTime associée à chaque valeur définit quand la valeur est en place ;
celles des valeurs entre les valeurs keyTimes sont interpolées ;keyTimes.keyTimes est ignoré.keyTimes est erronées (mauvaises valeurs, trop ou pas assez de valeurs),
le fragment de document est en erreur (voir Le traitement des erreurs).keyTimes sera ignorée.keySplines
= "<liste>"keyTimes,
définissant une fonction de Bézier cubique qui contrôle l'allure du défilement des intervalles.
La valeur de l'attribut est une liste de descriptions de points de contrôle, séparées par des points-virgules.
Chaque description de point de contrôle forme un jeu de quatre valeurs : x1 y1 x2 y2, décrivant
les points de contrôle de Bézier pour un segment de temps.
Les valeurs de keyTimes qui définissent le segement associé sont les « points d'ancrage »
de Bézier et les valeurs de keySplines sont les points de contrôle. Ainsi, il doit y avoir un jeu de
points de contrôle en moins qu'il n'y a de valeurs keyTimes. calcMode soit "spline".keySplines est erronées (mauvaises valeurs, trop ou pas assez de valeurs),
le fragment de document est en erreur (voir Le traitement des erreurs).La spécification SMIL Animation [SMILANIM] définit en détails les règles de traitement associées aux attributs ci-dessus. Exceptées les règles propres à SVG mentionnées dans cette spécification, la spécification SMIL Animation [SMILANIM] représente la définition normative des règles de traitement de ces attributs. Les blancs de tête et de queue, ainsi que ceux avant et après les séparateurs points-virgules, seront ignorés.
Toutes les valeurs spécifiées doivent être des valeurs légales pour l'attribut en question (comme définies dans l'espace de nommage associé). Si l'une des valeurs est illégale, le fragment de document est en erreur (voir Le traitement des erreurs).
Si une liste de valeurs est utilisée, les valeurs seront appliquées dans l'ordre au cours de l'animation. Si on spécifie une liste pour l'attribut values, les valeurs des attributs from, to et by seront ignorées.
Les règles de traitement des variantes de from/by/to des animations sont décrites dans Les valeurs des fonctions d'animation.
Les schémas suivants montrent comment interpréter l'attribut keySplines. Chaque dessin illustre
l'effet des réglages de keySplines sur un seul intervalle (i.e., entre les paires de valeurs associées
dans les listes de keyTimes et de values). On peut assimiler l'axe horizontal à la valeur
d'entrée pour la progression unitaire de l'interpolation dans l'intervalle - i.e., l'allure à laquelle
l'interpolation s'effectue le long de l'intervalle donné. L'axe verticale représente la valeur résultante
pour la progression unitaire, produite par la fonction keySplines. On peut décrire ceci autrement :
l'axe horizontal est le temps unitaire en entrée pour l'intervalle et l'axe vertical le temps unitaire
en sortie. Voir également la section
Les temps de la synchronisation et de l'horloge du monde réel.
 keySplines="0 0 1 1" (par défaut) |
 keySplines=".5 0 .5 1" |
||
 keySplines="0 .75 .25 1" |
 keySplines="1 0 .25 .25" |
Pour l'illustration des calculs, considérons l'exemple simple :
<animate dur="4s" values="10; 20" keyTimes="0; 1"
calcMode="spline" keySplines={as in table} />
En utilisant les valeurs de keySplines pour chacun des quatre cas ci-dessus, les valeurs interpolées approchées, lors du déroulement de l'animation, sont :
| Valeurs de keySplines | Valeur initiale | Après 1s | Après 2s | Après 3s | Valeur finale |
| 0 0 1 1 | 10.0 | 12.5 | 15.0 | 17.5 | 20.0 |
| .5 0 .5 1 | 10.0 | 11.0 | 15.0 | 19.0 | 20.0 |
| 0 .75 .25 1 | 10.0 | 18.0 | 19.3 | 19.8 | 20.0 |
| 1 0 .25 .25 | 10.0 | 10.1 | 10.6 | 16.9 | 20.0 |
Pour une définition formelle du calcul des splines de Bézier, voir [FOLEY-VANDAM].
Il est souvent pratique de définir une animation comme un décalage, ou un delta, par rapport à la valeur d'un attribut, plutôt que comme des valeurs absolues. Une simple animation « agrandir » peut accroître la largeur d'un objet de 10 pixels :
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum"/>
</rect>
Il est souvent pratique, pour des animations répétées, de se construire sur des résultats précédents, qui s'accumulent avec chaque itération. L'exemple suivant fait que le rectangle continue à grandir au fur et à mesure de la répétition de l'animation :
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum" accumulate="sum" repeatCount="5"/>
</rect>
À la fin de la première répétition, le rectangle a une largeur de 30 pixels, à la fin de la deuxième une largeur de 40 pixels et à la fin de la cinquième une largeur de 70 pixels.
Pour des informations supplémentaires sur les animations additives, voir SMIL Animation : l'animation additive. Pour des informations supplémentaires sur les animations cumulatives, voir SMIL Animation : le contrôle du comportement d'une animation répétitive - l'animation cumulative.
Les attributs suivants sont communs aux éléments 'animate', 'animateMotion', 'animateColor' et 'animateTransform'.
<!ENTITY % animAdditionAttrs "additive (replace | sum) 'replace' accumulate (none | sum) 'none'" > |
Définitions des attributs :
by et
to influent également sur son comportement, comme décrit dans
SMIL Animation : l'influence des attributs from, to et by sur le comportement additif.to.
SVG permet l'animation des attributs comme des propriétés. Si un attribut donné, ou une propriété, peut être hérité par des descendants, alors les animations sur un élément parent, tel que l'élément 'g', ont pour effet de propager les valeurs d'animation des attributs, ou des propriétés, aux éléments descendants au cours de l'animation ; ainsi, les éléments descendants peuvent hériter des attributs et des propriétés animés de leurs ancêtres.
L'élément 'animate' s'utilise pour animer un seul attribut, ou une seule propriété, au cours du temps. Par exemple, pour donner un effet de fondu en fermeture sur un rectangle, qui se répète toutes les 5 secondes, on peut spécifier :
<rect>
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la définition normative pour cet élément se trouve dans la spécification SMIL Animation [SMILANIM]. Notamment, voir SMIL Animation : l'élément 'animate'.
<!ENTITY % animateExt "" > <!ELEMENT animate (%descTitleMetadata;%animateExt;) > <!ATTLIST animate %stdAttrs; %testAttrs; externalResourcesRequired %Boolean; #IMPLIED %animationEvents; %animElementAttrs; %animAttributeAttrs; %animTimingAttrs; %animValueAttrs; %animAdditionAttrs; > |
Pour la liste des attributs et des propriétés qui peuvent être animés avec l'élément 'animate', voir la section Les éléments, les attributs et les propriétés animables.
L'élément 'set' offre un moyen simple pour le paramétrage de juste une valeur d'attribut pour une durée spécifiée. Il gère tous les types d'attributs, y compris ceux qui ne peuvent pas être raisonnablement interpolés, comme les chaînes et les valeurs booléennes. L'élément 'set' n'est pas additif. Les attributs additifs et cumulatifs ne sont pas admis et seront ignorés si spécifiés.
Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la définition normative pour cet élément se trouve dans la spécification SMIL Animation [SMILANIM]. Notamment, voir SMIL Animation : l'élément 'set'.
<!ENTITY % setExt "" > <!ELEMENT set (%descTitleMetadata;%setExt;) > <!ATTLIST set %stdAttrs; %testAttrs; externalResourcesRequired %Boolean; #IMPLIED %animationEvents; %animElementAttrs; %animAttributeAttrs; %animTimingAttrs; to CDATA #IMPLIED > |
Définitions des attributs :
Pour la liste des attributs et des propriétés qui peuvent être animés avec l'élément 'set', voir Les éléments, les attributs et les propriétés animables.
L'élément 'animateMotion' entraîne le déplacement d'un élément appelé le long d'un tracé de mouvement.
Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la définition normative pour cet élément se trouve dans la spécification SMIL Animation [SMILANIM]. Notamment, voir SMIL Animation : l'élément 'animateMotion'.
<!ENTITY % animateMotionExt "" > <!ELEMENT animateMotion (%descTitleMetadata;,mpath? %animateMotionExt;) > <!ATTLIST animateMotion %stdAttrs; %testAttrs; externalResourcesRequired %Boolean; #IMPLIED %animationEvents; %animElementAttrs; %animTimingAttrs; calcMode (discrete | linear | paced | spline) 'paced' values CDATA #IMPLIED keyTimes CDATA #IMPLIED keySplines CDATA #IMPLIED from CDATA #IMPLIED to CDATA #IMPLIED by CDATA #IMPLIED %animAdditionAttrs; path CDATA #IMPLIED keyPoints CDATA #IMPLIED rotate CDATA #IMPLIED origin CDATA #IMPLIED > |
Définitions des attributs :
calcMode
= "discrete | linear | paced | spline"keyTimes.keyPoints, il doit y avoir exactement autant de valeurs dans la
liste de l'attribut keyPoints que dans celle de l'attribut keyTimes.keyPoints est erronnée (mauvaises valeurs, trop ou pas assez de valeurs),
alors le document est en erreur (voir Le traitement des erreurs).
<!ENTITY % mpathExt "" > <!ELEMENT mpath (%descTitleMetadata;%mpathExt;) > <!ATTLIST mpath %stdAttrs; %xlinkRefAttrs; xlink:href %URI; #REQUIRED externalResourcesRequired %Boolean; #IMPLIED > |
Définitions des attributs :
Pour l'élément 'animateMotion', les valeurs spécifiées des attributs from, by, to et values consistent en paires de coordonnées x et y, avec une seule virgule et/ou blanc séparant la coordonnée x de la coordonnée y. Par exemple, une valeur from="33,15" spécifie une valeur de coordonnée x de 33 et une valeur de coordonnée y de 15.
Quand il est fourni, l'attribut values doit consister en une liste de paires de coordonnées x et y. Les valeurs des coordonnées sont séparées par au moins un blanc ou une virgule. Des blancs supplémentaires autour du séparateur sont admis. Par exemple, les valeurs values="10,20;30,20;30,40" ou values="10mm,20mm;30mm,20mm;30mm,40mm". Chaque coordonnée est du type <longueur>. Les attributs from, by, to et values spécifient une forme sur le canevas qui représente le tracé de mouvement.
On dispose de deux options qui autorisent la définition d'un tracé de mouvement avec l'une des commandes de données de tracé de SVG :
Remarquer que les commandes de données de tracé de SVG ne peuvent contenir que des valeurs dans l'espace utilisateur, alors que les attributs from, by, to et values peuvent spécifier des coordonnées dans l'espace utilisateur ou en utilisant des identifiants d'unité. Voir la section Les unités.
Les divers points (x,y) de la forme fournissent une matrice de transformation supplémentaire, sur la Matrice de Transformation Courante de l'objet appelé, qui entraîne une translation sur l'axe-x et l'axe-y du système de coordonnées utilisateur courant des valeurs (x,y) de la forme calculées dans le temps. Ainsi, l'objet appelé subit une translation au cours du temps du fait du décalage du tracé de mouvement par rapport à l'origine du système de coordonnées utilisateur courant. La transformation supplémentaire est appliquée après toutes les transformations dues à l'attribut transform de l'élément cible ou après toutes les animations sur cet attribut, dues aux éléments 'animateTransform' sur l'élément cible.
Les attributs additive et accumulate s'appliquent aux éléments 'animateMotion'. Plusieurs éléments 'animateMotion', tous appelant simultanément le même élément cible, peuvent être additifs l'un par rapport à l'autre ; néanmoins, les transformations qui résultent des éléments 'animateMotion' sont toujours supplémentaires aux transformations dues à l'attribut transform de l'élément cible ou dues aux éléments 'animateTransform'.
La valeur de mode de calcul (calcMode) par défaut pour l'élément animateMotion est "paced". Ceci produira un mouvement avec une vélocité constante le long du tracé spécifié. Alors que les éléments animateMotion peuvent être additifs, il est important de faire remarquer que l'addition de deux ou plus animations "paced" (vélocité constante) peut ne pas résulter dans une animation du mouvement combiné avec une vélocité constante.
Quand un attribut path est utilisé conjointement avec les réglages "discrete",
"linear" ou "spline" pour l'attributcalcMode et quand l'attribut
keyPoints n'est pas fourni, on définit le
nombre de valeurs comme étant le nombre de points définis par le tracé, à moins qu'il y ait des
commandes "move to" dans le tracé. Une commande "move to" dans l'attribut path
(i.e. autre que celle au début de la description de path). Une commande "move to" ne
compte pas pour un point supplémentaire lors du découpage de la durée ou lors de l'association des valeurs
de keyTimes, keySplines et keyPoints. Quand un attribut
path est combiné avec le réglage "paced" pour l'attribut
calcMode, toutes les commandes "move to" sont sensées avoir une longueur de 0
(i.e., elles surviennent toujours instantanément), et l'attribut n'est pas pris en compte pour le calcul de l'égalisation
de la vélocité.
Pour une plus grande souplesse du contrôle de la vélocité le long du tracé de mouvement, l'attribut keyPoints offre la possibilité d'indiquer une progression le long de ce tracé pour chacune des valeurs spécifiés de l'attribut keyTimes. Quand il est spécifié, l'attribut keyPoints entraîne l'application des valeurs de keyTimes sur celles de keyPoints plutôt que sur les points spécifiés dans le jeu de l'attribut values ou sur ceux de l'attribut path.
Les règles de surclassement pour l'élément 'animateMotion suivent. Pour ce qui est de la définition du tracé de mouvement, l'élément 'mpath' surclasse l'attribut path, qui surclasse l'attribut values, qui surclasse les attributs from/by/to. Pour ce qui est de la détermination des points qui correspondent à l'attribut keyTimes, l'attribut keyPoints surclasse l'attribut path, qui surclasse l'attribut values, qui surclasse les attributs from/by/to.
À chaque instant t d'une animation sur un tracé de mouvement, cette animation ayant une durée dur, les coordonnées calculées (x,y) d'un point sur le tracé se déterminent en recherchant le celui qui se trouve à une distance t/dur au long du tracé de mouvement, en utilisant l'algorithme de distance au long du tracé de l'agent utilisateur.
L'exemple suivant illustre les calculs des matrices de transformation au cours d'une animation sur un tracé de mouvement.
L'exemple animMotion01 montre un triangle qui se déplace sur un tracé de mouvement.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple animMotion01 - illustre les calculs d'animation du mouvement</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Dessine le contour du tracé de mouvement en bleu, avec
trois petits cercles au début, au milieu et à la fin. -->
<path d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Voici un triangle qui se déplacera sur le tracé de mouvement.
Il est défini avec une orientation verticale, la base du triangle étant
centrée horizontalement juste au-dessus de l'origine. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Définit l'animation sur le tracé de mouvement -->
<animateMotion dur="6s" repeatCount="indefinite"
path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
</path>
</svg>
 À zéro seconde |
 À trois secondes |
 À six secondes |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Le tableau suivant montre les matrices de transformation supplémentaires appliquées pour obtenir l'effet d'animation sur le tracé de mouvement.
| Après 0s | Après 3s | Après 6s | |
| Transformation supplémentaire due au mouvement au long du tracé de mouvement |
translate(100,250) | translate(250,100) | translate(400,250) |
| Transformation supplémentaire due à rotate="auto" |
rotate(-90) | rotate(0) | rotate(90) |
Pour une liste des éléments qui peuvent être animés en utilisant l'élément 'animateMotion', voir la section Les éléments, les attributs et les propriétés animables.
L'élément 'animateColor' spécifie une transformation de couleur au cours du temps.
Exceptées les règles propres à SVG mentionnées explicitement dans cette spécification, la définition normative pour cet élément se trouve dans la spécification SMIL Animation [SMILANIM]. Notamment, voir SMIL Animation : l'élément 'animateColor'.
<!ENTITY % animateColorExt "" > <!ELEMENT animateColor (%descTitleMetadata;%animateColorExt;) > <!ATTLIST animateColor %stdAttrs; %testAttrs; externalResourcesRequired %Boolean; #IMPLIED %animationEvents; %animElementAttrs; %animAttributeAttrs; %animTimingAttrs; %animValueAttrs; %animAdditionAttrs; > |
Les attributs from, by et to admettent des valeurs de couleur, chaque couleur étant exprimée selon la syntaxe suivante (la même syntaxe utilisée pour les propriétés de SVG qui peuvent avoir des valeurs de couleur) :
<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)]
L'attribut values pour l'élément 'animateColor' consiste en une liste de valeurs de couleur, séparées par des points-virgules, chaque valeur de couleur étant exprimée selon la syntaxe ci-dessus.
On peut fournir des valeurs de couleur hors-limite, mais leur traitement par l'agent utilisateur dépendra de l'implémentation. Les agents utilisateurs devraient ramener les valeurs de couleur dans la plage admise aussi tard que possible, remarquer cependant que des différences entre les systèmes peuvent empêcher un comportement cohérent d'un système à l'autre.
La propriété 'color-interpolation' s'applique aux interpolations de couleur issues des animations avec 'animateColor'.
Pour une liste des attributs et des propriétés qui peuvent être animés en utilisant l'élément 'animateColor', voir la section Les éléments, les attributs et les propriétés animables.
L'élément 'animateTransform' anime un attribut de transformation sur un élément cible, de ce fait permettant aux animations de contrôler translation, changement d'échelle, rotation et/ou inclinaison.
<!ENTITY % animateTransformExt "" > <!ELEMENT animateTransform (%descTitleMetadata;%animateTransformExt;) > <!ATTLIST animateTransform %stdAttrs; %testAttrs; externalResourcesRequired %Boolean; #IMPLIED %animationEvents; %animElementAttrs; %animAttributeAttrs; %animTimingAttrs; %animValueAttrs; %animAdditionAttrs; type (translate | scale | rotate | skewX | skewY) "translate" > |
Définitions des attributs :
Les attributs from, by et to admettent des valeurs exprimées selon la même syntaxe disponible pour le type de transformation en question :
L'attribut values pour l'élément 'animateTransform' consiste en une liste de valeurs, séparées par des points-virgules, où chaque valeur individuelle est exprimée comme décrit ci-dessus pour les attributs from, by et to.
Si l'attribut calcMode a la valeur paced, alors, pour chaque composant de la transformation, une distance « totale » est calculée (par exemple, pour une opération en translation, on calcule une distance totale pour tx et ty), celle-ci étant la somme des valeurs absolues des différences entre chaque paire de valeurs, et l'animation se déroule pour produire un mouvement de distance constante pour chaque composant individuel.
Quand une animation est active, l'effet d'un élément 'animateTransform' non additif (i.e., additive="replace") est de remplacer la valeur de l'attribut donné par celle issue de la transformation définie par 'animateTransform'. L'effet additif (i.e., additive="sum") est de post-multiplier la matrice de transformation correspondante définie par cet élément 'animateTransform'. En illustration :
<rect transform="skewX(30)"...>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="90" dur="5s"
additive="replace" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
additive="replace" fill="freeze"/>
</rect>
Dans l'extrait ci-dessus, comme les deux animations ont la valeur additive="replace", la première animation surclasse la transformation sur le rectangle en question et la seconde surclasse la transformation issue de la première ; de ce fait, au temps 5 secondes, le résultat visuel pour les deux animations ci-dessus équivaudrait au rectangle statique suivant :
<rect transform="scale(2)" ... />
Maintenant dans l'exemple qui suit :
<rect transform="skewX(30)"...>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="90" dur="5s"
additive="sum" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
additive="sum" fill="freeze"/>
</rect>
Dans cet extrait, comme les deux animations ont la valeur additive="sum", la première animation post-multiplie sa transformation avec toutes celles du rectangle en question et la seconde post-multiplie sa transformation avec toute transformation issue de la première animation ; ainsi, au temps 5 secondes, le résultat visuel pour les deux animations ci-dessus équivaudrait au rectangle statique suivant :
<rect transform="skewX(30) rotate(90) scale(2)" ... />
Pour une liste des attributs et des propriétés qui peuvent être animés en utilisant l'élément 'animateTransform', voir la section Les éléments, les attributs et les propriétés animables.
Ce qui suit représente la liste de tous les éléments qui peuvent être animés par un élément 'animateMotion' :
Dans cette spécification, les définitions des attributs ou des propriétés précisent
s'ils peuvent être animés, ou non, par les éléments d'animation de SVG.
On désigne ceux des attributs et celles des propriétés qui sont animables comme ceci :
Animable : oui.
ceux et celles qui ne le sont pas comme cela :
Animable : non.
SVG possède un jeu défini de types de données de base pour ses divers attributs et propriétés reconnus. Pour ceux des attributs et celles des propriétés animables, le tableau suivant indique les éléments d'animation qui peuvent être utilisés pour animer chaque type de données de base. Si un attribut donné, ou une propriété, admet des valeurs de mot-clé (qui ne sont pas additives) ou des valeurs numériques (qui sont additives), alors les animations additives sont possibles si la l'animation subséquente utilise une valeur numérique, même si l'animation de base utilise une valeur de mot-clé ; au contraire, si l'animation subséquente utilise une valeur de mot-clé, aucune animation additive n'est possible.
| Type de données | Additive ? | 'animate' | 'set' | 'animate Color' |
'animate Transform' |
Remarques |
|---|---|---|---|---|---|---|
| <angle> | oui | oui | oui | non | non | |
| <couleur> | oui | oui | oui | oui | non | Seules les valeurs de couleur RGB sont additives. |
| <coordonnée> | oui | oui | oui | non | non | |
| <fréquence> | non | non | non | non | non | |
| <entier> | oui | oui | oui | non | non | |
| <longueur> | oui | oui | oui | non | non | |
| <liste-de-xxx> | non | oui | oui | non | non | |
| <nombre> | oui | oui | oui | non | non | |
| <peinture> | oui | oui | oui | oui | non | Seules les valeurs de couleur RGB sont additives. |
| <pourcentage> | oui | oui | oui | non | non | |
| <durée> | non | non | non | non | non | |
| <liste-transformation> | oui | non | non | non | oui | Additive veut dire qu'une transformation est post-multipliée au jeu des transformations de base. |
| <uri> | non | oui | oui | non | non | |
| Tous les autres types de données utilisés par les attributs et les propriétés animables | non | oui | oui | non | non |
Toute déviation par rapport au tableau ci-dessus ou toute autre remarque spéciale sur les capacités d'animation d'un attribut donné, ou d'une propriété, sont incluses dans la section de la spécification où l'attribut donné, ou la propriété est définie.
L'exemple dom01 montre une utilisation simple en utilisant le DOM.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="2cm" viewBox="0 0 400 200"
xmlns="http://www.w3.org/2000/svg"
onload="DebuterAnimation(evt)" >
<script type="text/ecmascript"><![CDATA[
var valeur_temps = 0;
var increment_minuteur = 50;
var temps_maximum = 5000;
var element_textuel;
function DebuterAnimation(evt) {
element_textuel = evt.target.ownerDocument.getElementById("LeTexte");
MontrerEtAgrandirElement();
}
function MontrerEtAgrandirElement() {
valeur_temps = valeur_temps + increment_minuteur;
if (valeur_temps > temps_maximum)
return;
// Augmente l'échelle du texte graduellement jusqu'à 20 fois plus grande.
echelle = (valeur_temps * 20.) / temps_maximum;
element_textuel.setAttribute("transform", "scale(" + echelle + ")");
// Rend la chaîne plus opaque
opacite = valeur_temps / temps_maximum;
element_textuel.setAttribute("opacity", opacite);
// Rappelle la fonction MontrerEtAgrandirElement <increment_minuteur> millisecondes plus tard.
setTimeout("MontrerEtAgrandirElement()", increment_minuteur)
}
window.MontrerEtAgrandirElement = MontrerEtAgrandirElement
]]></script>
<rect x="1" y="1" width="398" height="198"
fill="none" stroke="blue" stroke-width="2"/>
<g transform="translate(50,150)" fill="red" font-size="7">
<text id="LeTexte">SVG</text>
</g>
</svg>
 À 0 seconde |
 À 2.5 secondes |
 À 5 secondes |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Le fichier SVG ci-dessus contient un seul élément graphique, la chaˆne textuelle "SVG". L'animation boucle pendant 5 secondes. L'animation de la chaîne textuelle commence toute petite et transparente et s'agrandit jusqu'à devenir grande et opaque. Voici une explication de comment cet exemple fonctionne :
onload="DebuterAnimation(evt)" indique, une fois le document entièrement chargé
et traité, l'invocation de la fonction ECMAScript DebuterAnimation() ;DebuterAnimation() n'est appelée qu'une seule fois pour la valeur à donner à la variable globale
element_textuel et pour l'appel initial de la fonction MontrerEtAgrandirElement(). Cette fonction
MontrerEtAgrandirElement() est appelée toutes les 50 millisecondes, elle réinitialise les attributs
transform et style sur l'élément de texte à de nouvelles valeurs à
chaque fois qu'elle est appelée. En fin de traitement de MontrerEtAgrandirElement(), cette fonction indique
au moteur ECMAScript de la rappeler à nouveau 50 millisecondes plus tard ;Si des scripts sont en train de modifier les mêmes attributs ou propriétés, en cours d'animation par des éléments d'animation de SVG, ces scripts modifient la valeur de base de l'animation. Si une valeur de base est modifiée alors qu'un élément d'animation est en train d'animer l'attribut correspondant, ou la propriété, alors les animations doivent s'ajuster dynamiquement à la nouvelle valeur de base.
Si un script est en train de modifier une propriété sur la feuille de style de surclassement dans le même temps où un élément d'animation est en train d'animer cette propriété, le résultat va dépendre de l'implémentation ; aussi, on recommande d'éviter cette manipulation.
Les deux interfaces suivantes sont issues de SMIL Animation. Elles sont mentionnées ici comme référence pratique :
L'interface ElementTimeControl, qui fait partie du module org.w3c.dom.smil et qui est définie dans SMIL Animation : les interfaces reconnues, définit des méthodes communes aux éléments qui ont des comportements d'animation compatibles avec SMIL Animation.
L'appel de la méthode beginElement() entraîne le commencement de l'animation, de la même manière
où une animation avec une synchronisation de début basée sur des événements commence. Le
moment de début effectif est l'instant de présentation courant au moment de l'appel de la méthode du DOM.
Remarquer que la méthode beginElement() est assujettie à l'attribut restart tout comme
une synchronisation de début basée sur des événements. Si une animation est spécifiée
comme devant désactiver la relance à un point donné, les appels de la méthode
beginElement() doivent échouer. Se reporter à la section
Relancer une animation.
L'appel de la méthode beginElementAt(secondes) suit le même comportement que
beginElement(), à la différence que le début effectif est décalé, par rapport
à l'instant de présentation courant, d'une quantité spécifiée en paramètre. Passer
une valeur de décalage négative entraîne le début de l'élément, comme pour la
méthode beginElement(), avec cependant pour effet que cet élément débute au
décalage spécifié pendant sa durée active. La méthode beginElementAt() doit
également honorer l'attribut restart. La sémantique de l'attribut restart, pour l'appel d'une
méthode beginElementAt(), est évaluée au moment de l'appel de la méthode et non
au moment du début effectif spécifié par le décalage en paramètre.
L'appel de la méthode endElement() entraîne la fin de la durée active d'une animation,
tout comme l'attribut end. En fonction de la valeur de l'attribut fill, l'effet d'animation peut ne
plus s'appliquer plus longtemps ou peut se figer sur l'effet courant. Se reporter à la section
Figer des animations.
Si une animation n'est pas couramment active (i.e. si elle n'a pas encore commencée ou si elle est figée),
la méthode endElement() échouera.
L'appel de la méthode endElementAt() entraîne la fin de la durée active d'une animation,
tout comme la méthode endElement(), mais autorise l'appelant à spécifier un décalage
positif, pour faire que l'élément se termine à un point dans le futur, plutôt que de retarder la
survenue effective de cette fin. La sémantique est identique à celle pour la méthode endElement().
Si la méthode endElementAt() est appelée plus d'une fois, alors qu'un élément est actif,
c'est le temps de fin spécifié par le dernier appel de la méthode qui déterminera le comportement
final.
interface ElementTimeControl {
boolean beginElement ( )
raises( DOMException );
boolean beginElementAt ( in float offset )
raises( DOMException );
boolean endElement ( )
raises( DOMException );
boolean endElementAt ( in float offset )
raises( DOMException );
};
Entraîne le commencement du plan de déroulement local de l'élément (assujetti aux contraintes de l'attribut restart).
| booléen |
Retourne true si l'appel de la méthode est réussi et si l'élément a débuté.
Retourne false si l'appel de la méthode a échoué. Les raisons probables d'un échec sont :
|
| DOMException |
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de beginElement.
|
Entraîne le commencement du plan de déroulement local de l'élément (assujetti aux contraintes de l'attribut restart) au décalage, par rapport au temps courant où la méthode est appelée. Si la valeur du décalage est supérieure ou égale à 0, la sémantique équivaut à celle d'un début basé sur un événement avec le décalage spécifié. Si la valeur du décalage est négative, la sémantique équivaut à celle de la méthode beginElement(), mais la durée active de l'élément est évaluée comme si l'élément avait débuté au décalage (négatif) transmis, par rapport au temps courant où la méthode est appelée.
| in float offset | Le décalage en secondes à partir duquel l'élément commence. |
| booléen |
Retourne true si l'appel de la méthode est réussi et si l'élément a débuté.
Retourne false si l'appel de la méthode a échoué. Les raisons probables d'un échec sont :
|
| DOMException |
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de beginElementAt.
|
| booléen |
Retourne true si l'appel de la méthode est réussi et si l'élément est terminé.
Retourne false si l'appel de la méthode a échoué. Les raisons probables d'un échec sont :
|
| DOMException |
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de endElement.
|
Entraîne l'arrèt du plan de déroulement local de cet élément au décalage spécifié, par rapport au temps courant où la méthode est appelée.
| in float offset | Le décalage en secondes à partir duquel l'élément se termine. Doit être supérieur ou égal à 0. |
| booléen |
Retourne true si l'appel de la méthode est réussi et si l'élément est terminé.
Retourne false si l'appel de la méthode a échoué. Les raisons probables d'un échec sont :
|
| DOMException |
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de endElementAt.
|
La liaison correspondante avec Java :
package org.w3c.dom.svg;
import org.w3c.dom.DOMException;
public interface ElementTimeControl {
boolean beginElement ( )
throws DOMException;
boolean beginElementAt ( float offset )
throws DOMException;
boolean endElement ( )
throws DOMException;
boolean endElementAt ( float offset )
throws DOMException;
}
L'interface TimeEvent, définie dans SMIL Animation : les interfaces reconnus, fournit l'information contextuelle spécifique associée aux événements de temps.
Les différents types d'événement qui peuvent survenir sont :
beginElement() ou beginElementAt() methods.
Remarquer que si un élément est relancé en cours de jeu, celui-ci déclenchera
un événement de fin, puis un autre événement de début quand l'élément se
relance.
endElement() ou endElementAt().
Remarquer que si un élément est relancé en cours de jeu, celui-ci déclenchera un
événement de fin, puis un autre événement de début quand l'élément se relance.
interface TimeEvent : events::Event {
readonly attribute views::AbstractView view;
readonly attribute long detail;
void initTimeEvent ( in DOMString typeArg, in views::AbstractView viewArg, in long detailArg );
};
view identifie l'interface AbstractView
[DOM2-VIEWS] à partir de laquelle l'événement
a été généré
| in DOMString typeArg | Spécifie le type d'événement. | |
| in views::AbstractView viewArg | Spécifie l'interface AbstractView de l'événement. | |
| in long detailArg | Spécifie la valeur de l'attribut detail de l'événement. |
La liaison correspondante avec Java :
package org.w3c.dom.svg;
import org.w3c.dom.events.Event;
import org.w3c.dom.views.AbstractView;
public interface TimeEvent extends
Event {
public AbstractView getView( );
public int getDetail( );
void initTimeEvent ( String typeArg, AbstractView viewArg, int detailArg );
}
Les interfaces suivantes sont définies ci-dessous : SVGAnimationElement, SVGAnimateElement, SVGSetElement, SVGAnimateMotionElement, SVGMPathElement, SVGAnimateColorElement, SVGAnimateTransformElement.
L'interface SVGAnimationElement est celle de base pour toutes les interfaces des éléments d'animation : SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement et SVGAnimateTransformElement.
Au contraire des autres interfaces du DOM de SVG, le DOM de SVG ne spécifie pas de propriétés du DOM
pratiques qui correspondent aux divers attributs de langage sur les éléments d'animation de SVG. Une
spécification de ces propriétés pratiques, de manière à ce qu'elles soient compatibles
avec des versions ultérieures de SMIL Animation, est attendue dans une version ultérieure de SVG. La méthode
courante, pour accéder et pour modifier les attributs sur les éléments d'animation, consiste à
utiliser les méthodes standards getAttribute, setAttribute, getAttributeNS et
setAttributeNS, définies dans DOM2.
interface SVGAnimationElement :
SVGElement,
SVGTests,
SVGExternalResourcesRequired,
smil::ElementTimeControl,
events::EventTarget {
readonly attribute SVGElement targetElement;
float getStartTime ( );
float getCurrentTime ( );
float getSimpleDuration ( )
raises( DOMException );
};
Retourne le temps de début, en secondes, pour cette animation.
| float | Le temps de début, en secondes, pour cette animation, par rapport au temps de début du conteneur de temps. |
Retourne le temps courant, en secondes, par rapport au temps zéro du conteneur de temps.
| float | Le temps courant, en secondes, par rapport au temps zéro pour le conteneur de temps donné. |
Retourne le nombre de secondes pour la durée simple de cette animation. Si la durée simple est indéfinie (par exemple, le temps de fin est indéfini), alors une exception est déclenchée.
| float | Le nombre de secondes pour la durée simple de cette animation. |
| DOMException |
NOT_SUPPORTED_ERR : la durée simple n'est pas déterminée sur l'élément donné.
|
L'interface SVGAnimateElement correspond à l'élément 'animate'.
L'accès orienté objet aux attributs de l'élément 'animate' via le DOM de SVG n'est pas disponible.
interface SVGAnimateElement : SVGAnimationElement {};
L'interface SVGSetElement correspond à l'élément 'set'.
L'accès orienté objet aux attributs de l'élément 'set' via le DOM de SVG n'est pas disponible.
interface SVGSetElement : SVGAnimationElement {};
L'interface SVGAnimateMotionElement correspond à l'élément 'animateMotion'.
L'accès orienté objet aux attributs de l'élément 'animateMotion' via le DOM de SVG n'est pas disponible.
interface SVGAnimateMotionElement : SVGAnimationElement {};
L'interface SVGMPathElement correspond à l'élément 'mpath'.
interface SVGMPathElement :
SVGElement,
SVGURIReference,
SVGExternalResourcesRequired {};
L'interface SVGAnimateColorElement correspond à l'élément 'animateColor'.
L'accès orienté objet aux attributs de l'élément 'animateColor' via le DOM de SVG n'est pas disponible.
interface SVGAnimateColorElement : SVGAnimationElement {};
L'interface SVGAnimateTransformElement correspond à l'élément 'animateTransform'.
L'accès orienté objet aux attributs de l'élément 'animateTransform' via le DOM de SVG n'est pas disponible.
interface SVGAnimateTransformElement : SVGAnimationElement {};