4 septembre 2001

19 L'animation


Contenu


 

19.1 Introduction

Le 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 :

19.2 Les éléments d'animation

19.2.1 Aperçu

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.

19.2.2 Les relations avec 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).


19.2.3 Un exemple d'éléments d'animation

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>
Exemple anim01
Exemple anim01 - 0 seconde À zéro seconde   Example anim01 - 3 secondes À trois secondes
Example anim01 - 6 secondes À six secondes   Example anim01 - 9 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.

 

19.2.4 Les attributs pour identifier l'élément cible d'une 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 :

xlink:href = "<uri>"
Une référence d'URI vers l'élément qui est la cible de cette animation et qui sera donc modifié au cours du temps.
L'élément cible doit faire partie du fragment de document SVG courant.
La valeur <uri> doit désigner exactement un seul élément cible capable du rôle de cible pour l'animation donnée. Si la valeur <uri> pointe vers plusieurs éléments cibles, si l'élément cible donnée est incapable du rôle de cible pour l'animation donnée ou si l'élément cible donné ne fait pas partie du fragment de document SVG courant, alors le document est en erreur (voir Le traitement des erreurs).
Si l'attribut xlink:href n'est pas fourni, alors l'élément cible sera l'élément parent immédiat de l'élément d'animation courant.
Se reporter aux descriptions des éléments d'animation individuels pour les restrictions sur les types d'élément qui peuvent être des cibles pour les types particuliers d'animation.
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 : la spécification de la cible d'animation.

Attributs définis ailleurs :
%xlinkRefAttrs;.

 

19.2.5 Les attributs pour identifier l'attribut ou la propriété cibles pour une animation

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 = <attributeName>
Spécifie le nom de l'attribut cible. Un préfixe XMLNS peut être utilisé pour indiquer l'espace de nommage XML de l'attribut. Le préfixe sera interprété dans le champs de l'élément d'animation courant (i.e., l'élément appelant).
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 : la spécification de la cible d'animation.
attributeType = "CSS | XML | auto"
Spécifie l'espace de nommage dans lequel l'attribut cible et ses valeurs associées sont définis. La valeur de l'attribut est l'une parmi les suivantes (les valeurs sont sensibles à la casse):
"CSS"
Spécifie que la valeur de "attributeName" est le nom d'une propriété CSS définie comme étant animable dans cette spécification.
"XML"
Spécifie que la valeur de "attributeName" est le nom d'un attribut XML défini dans l'espace de nommage XML par défaut de l'élément cible. Si la valeur de 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.
"auto"
L'implementation devrait faire correspondre la valeur de 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.
La valeur par défaut est "auto".
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 : la spécification de la cible d'animation.


19.2.6 Les attributs pour contrôler la synchronisation de l'animation

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 : begin-value-list
Définit quand l'élément devrait commencer (i.e. devenir actif).
La valeur de l'attribut est une liste de valeurs, séparées par des points-virgules.

begin-value-list ::= begin-value (S? ";" S? begin-value-list )?
Une liste de valeurs de début, séparées par des points-virgules. L'interprétation d'une liste des temps de début est détaillée dans la section "L'évaluation des listes des temps de début et de fin" de SMIL Animation.
 
begin-value : ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | wallclock-sync-value | "indefinite" )
Décrit le début d'élément.
 
offset-value ::= ( S? "+" | "-" S? )? ( Clock-value )
Pour SMIL Animation, ceci décrit le début d'élément comme un décalage à partir d'une base de synchronisation implicite. Pour SVG, le début de la base de synchronisation se définit comme étant relative au début du document. En SVG, comme la fin de document est toujours indéterminée, une valeur de décalage négative est toujours une erreur.
« errata 2002-11-15 »
syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? Clock-value )?
Décrit une base de synchronisation et un décalage optionnel par rapport à cette base de synchronisation. Le début d'élément se définit par rapport au début ou à la fin active d'une autre animation. Une base de synchronsation consiste en une référence d'ID vers un autre élément d'animation, suivie par soit begin, soit end pour indiquer la synchronisation avec le commencement ou avec la fin active de l'élément d'animation appelé.
event-value ::= ( Id-value "." )? ( event-ref ) ( S? ("+"|"-") S? Clock-value )?
Décrit un événement et un décalage optionnel qui détermine le début de l'élément. Le début de l'animation se définit par rapport à l'instant où l'événement est déclenché. La liste des symboles d'événement disponibles pour un élément donné, basé sur un événement, est la liste des attributs d'événement disponibles pour l'élément donné, comme définie par le DTD de SVG, avec pour seule différence que le « on » de tête est retiré du nom de l'événement (i.e., le nom d'événement d'animation est 'click', et pas 'onclick'). On peut trouver la liste de tous les événements reconnus par SVG dans la section La liste complète des événements reconnus. Les détails de la synchronisation basée sur l'événement sont décrits dans SMIL Animation : l'unification des synchronisations basée sur l'événement et plannifiée.
repeat-value ::= ( Id-value "." )? "repeat(" integer ")" ( S? ("+"|"-") S? Clock-value )?
Décrit un événement repeat qualifié. Le début d'élément se définit par rapport à l'instant où l'événement repeat est déclenché avec la valeur d'itération spécifiée.
accessKey-value ::= "accessKey(" character ")" ( S? ("+"|"-") S? Clock-value )?
Décrit une touche d'accès qui détermine le début d'élément. Le début d'élément se définit par rapport à l'instant où l'utilisateur entre le caractère de touche d'accès.
"wallclock-sync-value : wallclock(" wallclock-value ")"
Décrit le début d'élément comme le temps d'une horloge du monde réel. La syntaxe du temps d'horloge se base sur celle définie dans [ISO8601].
"indefinite"
Le début de l'animation sera déterminé par un appel de la méthode "beginElement()" ou par un hyperlien visant l'élément.
Les méthodes d'animation DOM sont décrites dans les interfaces du DOM.
La synchronisation basée sur les hyperliens est décrite dans SMIL Animation : les hyperliens et la synchronisation.
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 'begin'.
 
dur : Clock-value | "media" | "indefinite"
Spécifie la durée simple.
La valeur de l'attribut peut être l'une des suivantes :
Clock-value
Spécifie la longueur d'une durée simple en instant de présentation. La valeur doit être supérieure à 0.
"media"
Spécifie la durée simple comme étant la durée du média intrinsèque. Ceci n'est valable que pour les éléments définissant un média.
(Pour les éléments d'animation de SVG, si la valeur "media" est spécifiée, l'attribut sera ignoré).
"indefinite"
Spécifie la durée simple comme indéfinie.
Si l'animation n'a pas d'attribut dur, la durée simple est indéfinie. Remarquer que l'interpolation ne fonctionnera pas si la durée simple est indéfinie (bien que cela puisse toujours être utile pour les éléments 'set'). 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 'dur'.
end : end-value-list
Définit une valeur de fin pour l'animation, qui peut contraindre la durée active. La valeur de l'attribut est une liste de valeurs, séparées par des points-virgules.

end-value-list ::= end-value (S? ";" S? end-value-list )?
Une liste de valeurs de fin, séparées par des points-virgules. L'interprétation d'une liste de temps de fin est détaillée ci-dessous.

end-value : ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | wallclock-sync-value | "indefinite" )
Décrit la fin active de l'animation.
Une valeur de "indefinite" spécifie que la fin de l'animation sera déterminée par un appel de la méthode "endElement()" (les méthodes du DOM pour l'animation sont décrites dans les interfaces du DOM).
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 'end'.
min : Clock-value | "media"
Spécifie la valeur minimum de la durée active.
La valeur de l'attribut peut être l'une des suivantes :
Clock-value
Spécifie la longueur de la valeur minimum de la durée active, mesurée en temps local.
La valeur doit être supérieure à 0.
"media"
Spécifie la valeur minimum de la durée active comme étant la durée de média intrinsèque. Ceci n'est valable que pour les éléments définissant un média. (Pour les éléments d'animation de SVG, si l'attribut "media" est spécifié, l'attribut sera ignoré).
La valeur par défaut de l'attribut min est "0". Ceci ne contraint pas du tout la durée active.
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 'min'.
max : Clock-value | "media"
Spécifie la valeur maximum de la durée active.
La valeur de l'attribut peut être l'une des suivantes :
Clock-value
Spécifie la longueur de la valeur maximum de la durée active, mesurée en temps local.
La valeur doit être supérieure à 0.
"media"
Spécifie la valeur maximale de la durée active comme étant la durée du média intrinsèque. Ceci n'est valable que pour les éléments définissant un média. (Pour les éléments d'animation de SVG, si la valeur "media" est spécifiée, l'attribut sera ignoré).
Il n'y a pas de valeur par défaut pour l'attribut max. Ceci ne contraint pas du tout la durée active.
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 'max'.
restart : "always" | "whenNotActive" | "never"
always
L'animation peut être relancée à tout instant.
C'est la valeur par défaut.
whenNotActive
L'animation ne peut être relancée que si elle n'est pas active (i.e., après la fin active). Les tentatives de relancer l'animation pendant sa durée active sont ignorées.
never
L'élément ne peut pas être relancé pour le restant de la durée simple courante du conteneur de temps parent. (Dans le cas de SVG, le conteneur de temps parent étant le fragment de document SVG, l'animation ne peut être relancée pour le restant de la durée du document).
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 'restart'.
repeatCount : numeric value | "indefinite"
Spécifie le nombre d'itérations de la fonction d'animation. La valeur d'attribut peut être l'une des suivantes :
numeric value
C'est une valeur numérique « décimale » (en base 10) qui spécifie le nombre d'itérations. Elle peut comprendre des itérations partielles exprimées en valeurs fractionnelles. Une valeur fractionnelle décrit une partie de la durée simple. Les valeurs doivent être supérieures à 0.
"indefinite"
L'animation est définie comme se répétant indéfiniment (i.e. jusqu'à la fin du document).
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 'repeatCount'.
repeatDur : Clock-value | "indefinite"
Spécifie la durée totale pour la répétition. La valeur de l'attribut peut être l'une des suivantes :
Clock-value
Spécifie la durée en instant de présentation de la répétition de la fonction d'animation f(t).
"indefinite"
L'animation est définie comme se répétant indéfiniment (i.e. jusqu'à la fin du document).
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 'repeatDur'.
fill : "freeze" | "remove"
Cet attribut peut avoir les valeurs suivantes :
freeze
L'effet d'animation F(t) est défini pour geler la valeur d'effet à la dernière valeur de la durée active. L'effet d'animation est « gelé » pour le restant de la durée du document (ou jusqu'à ce que l'animation soit relancée - voir SMIL Animation : La relance d'une animation ).
remove
L'effet d'animation est retiré (ne s'applique plus) quand la durée active de l'animation est terminée. Après sa fin active, l'animation n'influe plus sur la cible (à moins que celle-ci ne soit relancée - voir SMIL Animation : La relance d'une animation ).
C'est la valeur par défaut.
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 'fill'.

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.

Clock values

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 :

Les valeurs fractionnelles sont juste des définitions décimales (en base 10) de secondes. Ainsi :

00.5s = 500 millisecondes
00:00.005 = 5 millisecondes


19.2.7 Les attributs qui définissent les valeur d'animation au cours du temps

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"
Spécifie le mode d'interpolation pour l'animation. Ceci peut être l'une des valeurs suivantes. La valeur du mode par défaut est "linear" ; cependant si l'attribut ne gère pas l'interpolation linéaire (par exemple, pour les chaînes), cette valeur de l'attribut calcMode est ignorée et une interpolation discrète sera utilisée.
discrete
Spécifie que la fonction d'animation passera d'une valeur à l'autre sans aucune interpolation.
linear
Une interpolation linéaire simple entre les valeurs est utilisée pour le calcul de la fonction d'animation. Sauf pour l'élément 'animateMotion', c'est la valeur par défaut pour calcMode.
paced
Définit une interpolation qui produit une vitesse de transition égalisée au cours de l'animation. Ceci n'est géré que pour des valeurs qui définissent une plage numérique linéaire et pour lesquelles on peut calculer certaines « distances » entre points (par exemple, la position, la hauteur, la largeur, etc.). Si la valeur "paced" 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.
spline
Interpole à partir d'une valeur de la liste de l'attribut values 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.
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 'calcMode'.
values = "<liste>"
Une liste d'une ou plusieurs valeurs, séparées par des points-virgules. semicolon-separated list of one or more values. Les attributs admettant des valeurs vectorielles sont gérés en utilisant la syntaxe vectorielle du domaine désigné par l'attribut 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>"
Une liste de valeurs de temps, séparées par des points-virgules, utilisée pour le contrôle de la vitesse de défilement de l'animation. Chaque temps de la liste correspond à une valeur dans la liste de l'attribut 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.

Si on spécifie une liste de valeurs pour l'attribut keyTimes, il doit y avoir exactement autant de valeur dans cette liste keyTimes que dans la liste values.

Chaque valeur de temps successive doit être supérieure ou égale à la valeur de temps précédente.

La sémantique de la liste de keyTimes dépend du mode d'interpolation :

  • Pour une animation "linear" ou "spline", la première valeur de temps dans la liste doit être 0 et la dernière de 1. La valeur de keyTime associée à chaque valeur définit quand la valeur est en place ; celles des valeurs entre les valeurs keyTimes sont interpolées ;
  • Pour une animation "discrete", la première valeur de temps dans la liste doit être 0. Le temps associé à chaque valeur définit quand la valeur est en place ; la fonction d'animation utilise cette valeur jusqu'au temps suivant défini dans keyTimes.
Quand le mode d'interpolation est "paced", l'attribut keyTimes est ignoré.

Si la spécification de l'attribut keyTimes est erronées (mauvaises valeurs, trop ou pas assez de valeurs), le fragment de document est en erreur (voir Le traitement des erreurs).

Si la durée simple est indéfinie, toute spécification de keyTimes sera ignorée.

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 'keyTimes'.
keySplines = "<liste>"
Un jeu de points de contrôle de Bézier, associé avec la liste de l'attribut 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

Les valeurs doivent toutes se trouver dans une plage de 0 à 1..

Cet attribut est ignoré à moins que la valeur de l'attribut calcMode soit "spline".

Si la spécification de l'attribut keySplines est erronées (mauvaises valeurs, trop ou pas assez de valeurs), le fragment de document est en erreur (voir Le traitement des erreurs).

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 'keySplines'.
from = "<value>"
Spécifie la valeur débutant l'animation.
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 'from'.
to = "<value>"
Spécifie la valeur finissant l'animation.
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 'to'.
by = "<value>"
Spécifie une valeur de décalage relative pour l'animation.
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 'by'.

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.

Exemples de keySplines
  Exemple keySplines01 - keySplines de 0 0 1 1 (par défaut) keySplines="0 0 1 1" (par défaut)   Example keySplines01 - keySplines de .5 0 .5 1 keySplines=".5 0 .5 1"
 
  Example keySplines01 - keySplines de 0 .75 .25 1 keySplines="0 .75 .25 1"   Example keySplines01 - keySplines de 1 0 .25 .25 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].


19.2.8 Les attributs qui contrôlent la succession des animations

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 :

additive = "replace | sum"
Contrôle si l'animation est additive, ou non.
sum
Spécifie que l'animation va s'ajouter à la valeur sous-jacente de l'attribut et les autres animations de faible priorité.
replace
Spécifie que l'animation va surclasser la valeur sous-jacente de l'attribut et les autres animations de faible priorité. C'est la valeur par défaut ; cependant, les valeurs des attributs d'animation 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.

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 'additive'.
accumulate = "none | sum"
Contrôle si l'animation est cumulative, ou non.
sum
Spécifie que chaque itération repeat suivant la première se bâtit sur la précédente.
none
Spécifie que les itérations repeat ne sont pas cumulatives. C'est la valeur par défaut.

Cet attribut est ignoré si la valeur de l'attribut cible ne gère pas l'addition ou si l'élément d'animation ne se répète pas.

Le cumul n'est pas défini pour l'animation "to".

Cet attribut sera ignoré si la fonction d'animation n'est spécifiée qu'avec l'attribut to.

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 'accumulate'.


19.2.9 L'héritage

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.


19.2.10 L'élément 'animate'

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

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, externalResourcesRequired, %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.


19.2.11 L'élément 'set'

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 :

to = "<value>"
Spécifie la valeur de l'attribut pour la durée de l'élément 'set'. La valeur en argument doit correspondre avec le type de l'attribut.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, externalResourcesRequired, %animationEvents;, %animElementAttrs;, %animAttributeAttrs;, %animTimingAttrs;.

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.


19.2.12 L'élément 'animateMotion'

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"
Spécifie le mode d'interpolation pour l'animation. Se reporter à la description générale de l'attribut calcMode ci-dessus. La seule différence étant que la valeur par défaut de l'attribut calcMode pour l'élément 'animateMotion' est paced. Voir SMIL Animation : l'attribut 'calcMode' pour l'élément 'animateMotion'.
path = "<données-de-tracé>"
Le tracé de mouvement, exprimé dans le même format et interprété de la même manière que pour l'attribut d sur l'élément 'path'. Une animation sur un tracé de mouvement a pour effet de rajouter une matrice de transformation supplémentaire sur la Matrice de Transformation Courante de l'objet appelé qui entraîne une translation, le long des axe-x et axe-y du système de coordonnées utilisateur courant, des valeurs calculées X et Y obtenues au cours du temps.
keyPoints = "<liste-de-nombres>"
L'attribut keyPoints admet une liste de valeurs décimales entre 0 et 1, séparées par des points-virgules et indiquent à quelle position sur le tracé de mouvement, l'objet devra se déplacer à l'instant spécifié en temps par la valeur correspondante de l'attribut keyTimes. Les calculs de distance emploient l'algorithme distance au long du tracé de l'agent utilisateur. Chaque valeur de progression dans la liste correspond à une valeur dans la liste de l'attribut keyTimes.
Si on spécifie une liste de valeurs pour keyPoints, il doit y avoir exactement autant de valeurs dans la liste de l'attribut keyPoints que dans celle de l'attribut keyTimes.
Si la spécification de l'attribut keyPoints est erronnée (mauvaises valeurs, trop ou pas assez de valeurs), alors le document est en erreur (voir Le traitement des erreurs).
rotate = "<angle> | auto | auto-reverse"
La valeur auto indique que l'objet subit une rotation dans le temps, de la valeur de l'angle avec la direction du tracé de mouvement (i.e., le vecteur tangent directionnel). La valeur auto-reverse indique que l'objet subit une rotation dans le temps, de la valeur de l'angle avec la direction du tracé de mouvement (i.e., le vecteur tangent directionnel), plus 180 degrés. On peut également donner une valeur d'angle effective, représentant un angle relatif à l'axe-x du système de coordonnées utilisateur courant. L'attribut rotate rajoute une matrice de transformation supplémentaire à la Matrice de Transformation Courante, qui applique une transformation en rotation sur l'origine du système de coordonnées utilisateur courant. Cette transformation en rotation est appliquée après la translation supplémentaire calculée en raison de l'attribut path. La valeur par défaut est 0.
origin = "default"
L'attribut origin est défini dans la spécification SMIL Animation [SMILANIM-ATTR-ORIGIN]. Il n'a aucun effet en SVG.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, externalResourcesRequired, %animationEvents;, %animElementAttrs;, %animTimingAttrs;, values, keyTimes, keySplines, from, to, by, %animAdditionAttrs;.
<!ENTITY % mpathExt "" >
<!ELEMENT mpath (%descTitleMetadata;%mpathExt;) >
<!ATTLIST mpath
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #REQUIRED
  externalResourcesRequired %Boolean; #IMPLIED >

Définitions des attributs :

xlink:href = "<uri>"
Une référence d'URI vers l'élément 'path' qui définit le tracé de mouvement.
Animable : non.

Attributs définis ailleurs :
%stdAttrs;,, %xlinkRefAttrs; externalResourcesRequired.

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>
Exemple animMotion01
Exemple animMotion01 - 0 seconde À zéro seconde   Exemple animMotion01 - 3 secondes À trois secondes   Exemple animMotion01 - 6 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.


19.2.13 L'élément 'animateColor'

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

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, externalResourcesRequired, %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.


19.2.14 L'élément 'animateTransform'

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 :

type = "translate | scale | rotate | skewX | skewY"
Indique le type de transformation qui verra ses valeurs changer au cours du temps.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, externalResourcesRequired, %animationEvents;, %animElementAttrs;, %animAttributeAttrs;, %animTimingAttrs;, %animValueAttrs;, %animAdditionAttrs;.

Les attributs from, by et to admettent des valeurs exprimées selon la même syntaxe disponible pour le type de transformation en question :

(Voir l'attribut transform).

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.


19.2.15 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.

19.3 L'animation avec le DOM de SVG

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>
Exemple dom01
Exemple dom01 - 0 seconde À 0 seconde   Exemple dom01 - 3 secondes À 2.5 secondes   Exemple dom01 - 6 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 :

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.

19.4 Les interfaces du DOM

Les deux interfaces suivantes sont issues de SMIL Animation. Elles sont mentionnées ici comme référence pratique :


L'interface ElementTimeControl

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.


Définition IDL
interface ElementTimeControl { 

  boolean beginElement (  )
                  raises( DOMException );
  boolean beginElementAt ( in float offset )
                  raises( DOMException );
  boolean endElement (  )
                  raises( DOMException );
  boolean endElementAt ( in float offset )
                  raises( DOMException );
};

Méthodes
beginElement

Entraîne le commencement du plan de déroulement local de l'élément (assujetti aux contraintes de l'attribut restart).

Aucun paramètre
Valeur retournée
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 :
  • L'élément est déjà actif et ne peut être relancé quand il est actif. L'attribut restart a la valeur "whenNotActive" ;
  • L'élément est actif, ou l'a été, et ne peut pas être relancé. L'attribut restart a une valeur de "never".
Exceptions
DOMException
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de beginElement.
beginElementAt

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.

Paramètres
in float offset Le décalage en secondes à partir duquel l'élément commence.
Valeur retournée
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 :
  • L'élément est déjà actif et ne peut être relancé quand il est actif. L'attribut restart a la valeur "whenNotActive" ;
  • L'élément est actif, ou l'a été, et ne peut pas être relancé. L'attribut restart a une valeur de "never".
Exceptions
DOMException
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de beginElementAt.
endElement
Entraîne la fin du plan de déroulement local de l'élément.
Aucun paramètre
Valeur retournée
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 :
  • L'élément n'est pas actif.
Exceptions
DOMException
SYNTAX_ERR : l'élément n'est pas défini avec une syntaxe appropriée autorisant l'appel de endElement.
endElementAt

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.

Paramètres
in float offset Le décalage en secondes à partir duquel l'élément se termine. Doit être supérieur ou égal à 0.
Valeur retournée
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 :
  • L'élément n'est pas actif.
Exceptions
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

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 :

beginEvent
Cet événement survient quand le plan de déroulement local de l'élément commence. Il surviendra toutes les fois où l'élément commencera la durée active (i.e., pour sa relance mais pas pour une répétition). Il peut survenir au cours du plan de déroulement normal (i.e. planifié ou interactif) comme dans le cas où l'élément a débuté avec les méthodes 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.
endEvent
Cet événement survient à la fin active de l'élément. Remarquer que cet événement n'est pas déclenché à la simple fin de chaque répétition. Cet événement peut survenir au cours du plan de déroulement normal (i.e., planifié ou interactif) comme dans le cas où l'élément est terminé avec les méthodes 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.
repeatEvent
Cet événement survient quand le plan de déroulement local d'un élément se répète. Il surviendra toutes les fois où l'élément se répète, après la première itération.
L'événement fournit une indication numérique de laquelle itération répétée commence. Cette valeur est un entier partant de 0 et, comme l'événement de répétition n'est pas déclenché pour la première itération, les valeurs observées pour l'attribut detail seront supérieure ou égale à 1.

Définition IDL
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 );
};

attributs
readonly views::AbstractView view
L'attribut view identifie l'interface AbstractView [DOM2-VIEWS] à partir de laquelle l'événement a été généré
readonly long detail
Spécifie une information de détail sur l'événement, en fonction du type d'événement. Indique le numéro de répétition de l'animation pour ce type d'événement.
Méthodes
initTimeEvent
La méthode initTimeEvent est utilisée pour initialiser la valeur d'une interface TimeEvent créée au travers d'une interface DocumentEvent. Cette méthode ne peut être appelée qu'avant que le TimeEvent ait été envoyé via la méthode dispatchEvent, bien qu'elle puisse être appelée plusieurs fois lors de cette phase si nécessaire. Si elle est appelée plusieurs fois, la dernière invocation a préséance.
Paramètres
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.
Aucune valeur retournée
Aucune exception

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

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.


Définition IDL
interface SVGAnimationElement : 
                SVGElement,
                SVGTests,
                SVGExternalResourcesRequired,
                smil::ElementTimeControl,
                events::EventTarget { 

  readonly attribute SVGElement targetElement;

  float getStartTime (  );
  float getCurrentTime (  );
  float getSimpleDuration (  )
                  raises( DOMException );
};

attributs
readonly SVGElement targetElement
L'élément en cours d'animation.
Méthodes
getStartTime

Retourne le temps de début, en secondes, pour cette animation.

Aucun paramètre
Valeur retournée
float Le temps de début, en secondes, pour cette animation, par rapport au temps de début du conteneur de temps.
Aucune exception
getCurrentTime

Retourne le temps courant, en secondes, par rapport au temps zéro du conteneur de temps.

Aucun paramètre
Valeur retournée
float Le temps courant, en secondes, par rapport au temps zéro pour le conteneur de temps donné.
Aucune exception
getSimpleDuration

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.

Aucun paramètre
Valeur retournée
float Le nombre de secondes pour la durée simple de cette animation.
Exceptions
DOMException
NOT_SUPPORTED_ERR : la durée simple n'est pas déterminée sur l'élément donné.

L'interface SVGAnimateElement

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.


Définition IDL
interface SVGAnimateElement : SVGAnimationElement {};


L'interface SVGSetElement

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.


Définition IDL
interface SVGSetElement : SVGAnimationElement {};


L'interface SVGAnimateMotionElement

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.


Définition IDL
interface SVGAnimateMotionElement : SVGAnimationElement {};


L'interface SVGMPathElement

L'interface SVGMPathElement correspond à l'élément 'mpath'.


Définition IDL
interface SVGMPathElement : 
                SVGElement,
                SVGURIReference,
                SVGExternalResourcesRequired {};


L'interface SVGAnimateColorElement

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.


Définition IDL
interface SVGAnimateColorElement : SVGAnimationElement {};


L'interface SVGAnimateTransformElement

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.


Définition IDL
interface SVGAnimateTransformElement : SVGAnimationElement {};