Animations en SVG

Création du fichier graphique de base

  1. Définir un symbole en forme de triangle, réalisé à l'aide d'un polygone entre les points (20,0), (40,40), (0,40) et (20,0). Placer ce triangle au point de coordonnées (200,200), en le remplissant avec la couleur bleue et une opacité de 0.6.
  2. Placer un cercle centré au point de coordonnées (220,200), de rayon 140, de contour rouge et sans remplissage.
  3. Placer un cercle centré au point de coordonnées (220,200), de rayon 2, de contour et de remplissage noirs.

Retour au cours

Animation de base

Utiliser l'élément <animate> pour déplacer le triangle horizontalement. Utiliser les attributs gérant la durée, la répétition. Contrôler l'animation par un clic sur un bouton.

Retour au cours

Changements de couleurs

Faire varier la couleur de bleue à verte, puis bleue, avec une période de dix secondes.

Retour au cours

Rotations et translations

  1. Faire en sorte que le triangle fasse trois tours en dix secondes, autour du point de coordonnées (220,200).
  2. Répéter ces rotations à l'infini.
  3. En dix secondes également, modifier le paramètre de translation de (0,0) à (0,100), puis retour à (0,0).

Retour au cours

Pour aller plus loin...

On peut également ajouter un filtrage. Dans la liste de définitions, ajouter les lignes suivantes :

<filter id="flou">
	<feGaussianBlur stdDeviation="1">
	</feGaussianBlur>
</filter>

Ces lignes définissent un filtre gaussien, nommé flou. On l'applique au triangle avec filter="url(#flou)" dans son appel. Faire varier l'attribut stdDeviation de 0 à 4, puis 0 avec une période de dix secondes.

Retour au cours