L'animation de SVG est un peu unique en ce sens qu'il existe trois façons distinctes de l'animer.
1. Animation avec CSS @keyframes
Les éléments SVG peuvent être ciblés et stylisés avec CSS. Cela signifie que vous pouvez appliquer une animation via @keyframes. Comme ça:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Vous pouvez choisir d’animer de cette façon si…
- L'animation est assez simple.
- Il vous suffit d'animer les propriétés que CSS peut animer.
- Vous connaissez déjà et êtes à l'aise avec les animations CSS.
2. Animation avec SMIL
Il existe une syntaxe pour les animations intégrées directement dans SVG. Voici un exemple très simple:
Voici un gros tutoriel sur tout ce qui est SMIL.
Vous pouvez choisir d’animer de cette façon si…
- Vous devez animer des propriétés que CSS ne peut pas, comme la forme elle-même.
- Vous avez besoin d'autres fonctionnalités spécifiques à SMIL, comme commencer une animation quand une autre se termine sans synchroniser manuellement les durées / retards. Ou des trucs d'interaction, comme commencer une animation sur un clic.
3. Animation avec JavaScript
Avec JavaScript, vous avez accès à des éléments tels que requestAnimationFrame (ou à d'autres boucles), vous pouvez donc animer simplement en changeant rapidement les valeurs de propriété. Il existe également des frameworks pour travailler avec SVG qui ont généralement des éléments d'animation intégrés. Ou des frameworks d'animation qui fonctionnent avec SVG. Comme SnapSVG, GreenSock, SVG.js ou Velocity.js.
Voici un exemple avec SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Vous pouvez choisir d’animer de cette façon si…
- Vous travaillez de toute façon en JavaScript, peut-être que votre animation est liée aux données que vous recevez avec JSON ou autre.
- Vous avez de toute façon besoin de JavaScript, car vous avez besoin de la logique ou des mathématiques ou de quelque chose d'autre vraiment possible uniquement là-bas.
- Vous êtes intéressé par le JavaScript qui résout certains bogues pour vous.
- La portée de votre animation est assez vaste / compliquée et vous avez besoin de l'abstraction et de l'organisation que JavaScript peut fournir.
Démo
Voir Pen Three Ways to Animate SVG par Chris Coyier (@chriscoyier) sur CodePen.
La façon dont vous utilisez finalement le SVG n'affecte-t-elle pas vos options?
Cela fait. Si vous utilisez SVG-as- , vous ne pourrez pas utiliser les animations CSS d'une autre feuille de style. Mais, vos animations SMIL fonctionneront, dans certains navigateurs (au moment d'écrire ces lignes, Chrome oui, Firefox non). Je ne serais pas surpris si le CSS intégré dans les fichiers SVG fonctionne ou fonctionnera un jour. JavaScript, probablement pas.
Si vous utilisez SVG dans une image d'arrière-plan CSS, j'imagine que c'est une histoire similaire à celle ci-dessus.
Si vous utilisez en ligne , toutes les possibilités s'offrent à vous.
Si vous utilisez SVG via un objectou iframe, vous devrez intégrer les scripts / styles directement dans le SVG pour que cela fonctionne.