Jour 16, encore du SVG ? oui ! mais en fouillant du coté de la balise <text> du SVG (qui nous sert à afficher du texte) et après avoir bien compris <viewBox> (qui nous donne notre espace de travail) sans oublier les valeurs x et y qui nous permet de le positionner au bon endroit.
Le but du jour est d’animé comme hier (lien vers l’article) et avant hier (lien vers l’article) du SVG mais cette fois en ce simplifiant la vie et en partant directement d’un texte.
On va donc mettre un hover avec une transition sur notre SVG qui animera notre stroke-dashoffset et notre fill comme ceci : transition: stroke-dashoffset .9s ease-out, fill 1s;
Ça nous donne un joli menu animé.
Voir le résultat ici : quentinrenaux.com/xp/1day1code/menu-svg-animation-path/
Menu animé en SVG
