Note: Une documentation SVG plus adéquate arrive ( heureusement ) dans le futur. En attenant, vous pouvez commencer,les exemples ci dessous vous aideront. Vous pouvez vous référer aux specifications et autres documents pour des détails plus spécifiques sur la synthaxe.

Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduit le support pour les animations SVG en utilisant Synchronized Multimedia Integration Language (SMIL). SMIL autorise à:

  • anime les attributs numériques d'un élément (x, y, ...)
  • anime la transformation des attributs (translation ou rotation)
  • anime les attributs de couleur
  • suit un mouvement

Ceci est possible en ajoutant un élément SVG comme <animate>  dans l'élément SVG element pour animer. Ci dessous sont présents des exemples pour les quatres différents manières.

À partir de Chrome 45.0, les animations SMIL sont obsolètes en faveur des animations CSS et des animations Web.

Animer l'attribut d'un élément

L'example suivant anime l'attribut cx d'un cercle. Pour le faire, nous ajoutons <animate>comme élément  dans<circle> l'éléments cercle. Les attributs importants pour <animate> sont:

attributeName
Le nom de l'attribut à animer.
from
La valeur initiale de l'attribut.
to
La valeur finale.
dur
La durée de l'animation (par exemple, écrire '5s' pour 5 secondes).

Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments <animate>

<!DOCTYPE html>
<html>
  <head>
    <title>Animation des attributs avec SMIL</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
            <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
       </circle>
     </svg>
  </body>
</html>

Anime la transformation d'attributs

L'élement <animateTransform> vous permet d'animer la transformation d'attributs. Ce nouvel élément est nécéssaire par ce que nous n'allons pas animer un simple attribut comme x qui est juste un nombre.
L'attribut de rotation ressemble à ceci : rotation(theta, x, y), theta est l'angle en degrés, xet y sont en position absolues.
Dans l'example ci dessous, nous animons le centre de rotation et l'angle.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animation avec transformation</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
            
			<animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            <!-- Rotate from 0 to 360 degrees, and move from 60 to 100 in the x direction. -->
            from="0 60 60"
            to="360 100 60"
            <!-- Keep doing this until the drawing no longer exists. -->
            repeatCount="indefinite" 
			/>
       </rect>
     </svg>
  </body>
</html>

Animation suivant un tracé ( chemin )

L'élement<animateMotion> vous permet d'animer la position et la rotation d'éléments tout en fonction d'un tracé spécifique. Ce chemin est définit de la même manière que dans <path>. Vous pouvez définir l'attribut pour définir si l'objet tourne en suivant la tangente du chemin.

Example 1: Linear motion

In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the <animateMotion> element. In this case, we're establishing a path consisting of a MoveTo command to establish the starting point for the animation, then the Horizontal-line command to move the circle 300 pixels to the right, followed by the Z command, which closes the path, establishing a loop back to the beginning. By setting the value of the repeatCount attribute to indefinite, we indicate that the animation should loop forever, as long as the SVG image exists.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
      <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
        <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
          <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
        </circle>
      </svg>
  </body>
</html>

Voir l'exemple sur une page

Example 2: Curved motion

Same example as before with a curved path and following the direction of the path.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
    <svg width="300px" height="100px">
      <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
      <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
          dur="3s" repeatCount="indefinite" rotate="auto">
      </rect>
    </svg>
  </body>
</html>

Voir également

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : tonybengue
 Dernière mise à jour par : tonybengue,