Une petite technique d'animation SVG populaire est le tracé de chemin. Si vous ne pouvez pas l'imaginer, voici une collection d'exemples de zillion que j'ai créés. Essentiellement, le trait autour des formes SVG se dessine au fil du temps.
J'en ai entendu parler pour la première fois dans l'article de Jake Archibald Dessin au trait animé en SVG, qui est une bonne explication de celui-ci comme il peut y en avoir. Mais bien sûr, j'ai aussi tenté ma propre explication et nous en revenons dans cette vidéo.
Je pense qu'il est plus facile de penser à commencer par CSS et à savoir comment les propriétés du tiret fonctionnent telles qu'appliquées à une forme SVG. Comment ils peuvent devenir plus longs, et même assez longs au point de couvrir (ou de ne pas couvrir) toute la forme. Ensuite, les compenser lorsqu'ils sont aussi longs, c'est ainsi que fonctionne le dessin.
Ensuite, une fois que vous avez compris cela, comprenez que JavaScript peut vous aider à calculer la longueur des tirets et des décalages nécessaires et faites-le correctement.
