Tuto SVG 12 - Animation

Public visé: dev lambda.

Objectif

• Animer des attributs simples avec SMIL.

Références W3C

• SVG 2 - Animation: https://www.w3.org/TR/SVG2/animate.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <circle cx="20" cy="60" r="18" fill="#3a6ea5">
    <animate attributeName="cx" from="20" to="200" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

tutos-svg-12-animation.svg

À retenir

• SMIL est supporté par Chrome/Firefox, mais peut être limité ailleurs.
• CSS peut animer transform ou opacity si tu préfères.
• Garde les animations simples pour la compatibilité.

Exercice

• Remplace animate par animateTransform (rotation).