WhatZeWeb

Dans ce tutoriel, nous allons voir comment ajouter une animation de rotation sur un texte, grâce à CSS et SVG.

Mais avant de commencer, (re)voyons ensemble ce qu’est le SVG : le Scalable Vector Graphics est un langage de balisage, basé sur le XML, et conçu pour décrire un ensemble de graphiques vectoriels bidimensionnels.

Actuellement, la version la plus récente de SVG est la 1.1, mais la version 2 est en cours de développement.

Vous pourrez trouver toutes les recommandations sur le sit du W3C.

Maintenant, entrons dans le vif du sujet : le code !

Notre animation sera déclenchée au survol d’un élément, ici, il s’agira simplement d’un point d’interrogation dans une balise <span>, libre à vous de l’adapter en fonction de vos besoins 😉

Posons la base de notre structure :

<div class="spin">

 <span>?</span>

</div>

Et pour que le rendu soit plus “sympa”, personnalisons la police, côté CSS :

@import url(https://fonts.googleapis.com/css?family=Caveat);

.spin {
  font-family: 'Caveat', cursive;
}

A présent, commençons à coder notre “élément visuel” en SVG :

<div class=”spin”>
   <!-- Code précédent -->
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="110" height="110" viewbox="0 0 110 110">
   </svg>
</div>

Voyons ensemble ce que définit cette première portion de code :

• xmlns définit l’espace de nom par défaut. Dans le cas d’un document html, celui-ci n’est pas obligatoire, mais il est indispensable dans le cas, par exemple, d’un document xml.

• Les attributs width et height définissent le viewport de notre élément. Ils permet tent de définir un rectangle qui contiendra nos éléments graphiques. Nous définissons donc ici un élément SVG dont le système de coordonnées ira de 0 à 110px en largeur et en hauteur.

• L’attribut viewbox se compose de quatre éléments : min-x, min-y, width et height. Il va permettre de préciser comment notre élément va s’afficher, et quelles parties de celui-ci nous voulons rendre visible.

Ainsi, si viewbox est plus petit que le viewport, seule une partie de notre SVG sera visible.

Dans le code ci-dessus, nous avons défini des valeurs correspondantes pour que la viewbox couvre entièrement l’image et que cette image entre dans les limites de son container.

Poursuivons notre “dessin”, avec le cercle qui contiendra le texte qui sera en rotation :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="110" viewbox="0 0 110 110">
   <path  id="curve" fill="lightblue" d="M 0 55 a 55 55 0 0 0 110 0 a 55 55 0 0 0 -110 0"/>
</svg>

Regardons ce code de plus près :

• l’élément path est l’élément le plus flexible des formes basiques en SVG : il peut être utilisé pour créer des lignes, des arcs, des courbes, etc. Ici, on lui ajoute deux attributs :

• l’attribut fill peut être utilisé de deux manières : pour définir le remplissage d’un texte ou d’une forme, mais également pour définir l’état final d’une animation. Comme vous l’aurez compris, ici, il est utilisé pour définir la couleur de fond de notre cercle.

• d, attribut indispensable de l’élément path, qui prend une série de valeurs constituée de lettres et de chiffres et qui va nous permettre de définir la forme de notre élément. Cette série, qui semble assez complexe au premier abord, se décompose ainsi :

  • les lettres sont des commandes : elles peuvent être en majuscules, indiquant que les coordonnées précisées ensuite sont des coordonnées absolues dans le conteneur, ou en minuscules, pour des coordonnées relatives.

  • les nombres sont les paramètres de ces commandes.

Ainsi, si l’on décompose notre attribut d, on y voit :

• M 0 55 : M est la commande pour MoveTo, qui prend les coordonnées x et y en paramètres. Donc ici, on déplace notre curseur au point de coordonnées 0, 55

• a 55 55 0 0 0 110 0 : a est la commande pour tracer un arc, et elle prend les paramètres suivants : rx ry x-axis-rotation large-arc-flag sweep-flag dx dy. Je ne les détaillerai pas ici, cela mériterait un article entier sur le sujet. Vous pouvez cependant consulter la documentation qui vous les présentera plus en détails.

Mais globalement, voici à quoi correspondent les valeurs (avec r pour le rayon du cercle, cx et cy les coordonnées du centre du cercle) :

<path d="
        M cx - r, cy
       a r,r 0 1,0 (r * 2),0
       a r,r 0 1,0 -(r * 2),0
    "/>

Maintenant, plaçons le texte au sein de notre SVG :

    <path … />

    <text dy="-5%">
        <textPath xlink:href="#curve">
            <tspan dx="75%">Plus d'infos</tspan>
            <tspan dx="75%">Plus d'infos</tspan>
        </textPath>
    </text>
</svg>

On notera ici l’utilisation de l’attribut xlink:href pour associer notre texte à notre cercle précédemment défini.

L’attribut dy sur l’élément <text>, avec -5% pour valeur nous permet de décaler légèrement le bas du texte du bord du cercle. Quant aux attributs dx sur nos éléments <tspan>, ils nous permettent de positionner correctement nos deux éléments textuels pour obtenir la répartition souhaitée.

Tous nos éléments visuels sont désormais placés, nous allons donc ajuster leur positionnement et leur apparence côté CSS :

.spin {
    position: relative;
    display: block;
    width: 7em;
    height: 7em;
    font-family: 'Caveat', cursive;
}

.spin > *:nth-child(1) {
    position: absolute;
    top: 25%;
    left: calc(50% - 15px);
    font-size: 3em;
    z-index: 9999;
}

.spin > svg {
    font-size: 1.4em;
}

Voilà qui est fait, nous pouvons passer à l’animation CSS !

Commençons par la définir, grâce à @keyframes :

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

On cherche ici simplement à faire tourner notre SVG, on n’utilise donc que deux étapes : initiale et finale, en faisant une rotation à 360°.

On appelle notre animation :

.spin:hover > svg {
    font-size: 1.4em;
    animation-name: spin;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

Nous aurions également pu utiliser la syntaxe courte avec la propriété raccourcie animation :

animation: spin 7s infinite forwards linear;

Et pour finir, maintenant que nous nous sommes assurés que le rendu visuel correspond bien à ce que l’on attend, nous allons “cacher” notre SVG pour ne l’afficher, et déclencher l’animation, qu’au survol de notre “?”.

.spin > svg {
    display: none;
}

.spin:hover > svg {
    display: block;
    animation: spin 7s forwards infinite;
    animation-timing-function: linear;
    font-size: 1.4em;
}

Nous avons terminé ! N’hésitez pas à allez voir le résultat final, ainsi que le code, sur Codepen.

Je vous invite également à aller lire la documentation sur le SVG et sur les animations CSS pour découvrir toutes les possibilités qui nous sont offertes.