Faire apparaître une bulle d’aide au survol d’une icône, révéler un panneau caché au clic, faire passer la couleur d’un badge de statut d’un gris neutre à un vert franc sans transition visible : dans tous ces cas, il ne s’agit pas d’animer une valeur en douceur, mais de la basculer d’un état à l’autre à un instant précis. C’est exactement ce que fait <set>, l’élément d’animation SMIL le plus simple du SVG.
Alors que la plupart des éléments d’animation SVG interpolent une valeur entre un point de départ et un point d’arrivée, <set> ne fait rien de tel : il fixe un attribut à une valeur donnée, à un moment donné, un point c’est tout. Pas de transition, pas de courbe, pas d’étapes intermédiaires.
Définition
<set> est un élément d’animation SMIL qui fixe la valeur d’un attribut à un instant précis, sans aucune interpolation. Il se place, comme <animate>, à l’intérieur de l’élément qu’il modifie, et prend un attributeName pour désigner l’attribut ciblé ainsi qu’un attribut to pour la valeur appliquée. Il n’existe pas d’attribut from pour <set>, puisqu’il n’y a justement rien à interpoler entre un départ et une arrivée : la valeur change d’un bloc, au moment défini par begin, et reste ainsi jusqu’à ce que dur soit écoulé.
Attributs principaux
| Attribut | Rôle |
|---|---|
attributeName | L’attribut ciblé, par exemple visibility, display ou fill. |
to | La valeur appliquée d’un bloc, sans transition. |
begin | L’instant ou l’événement déclenchant le changement, par exemple un délai ou un clic. |
dur | Durée pendant laquelle la nouvelle valeur reste active. |
fill | freeze conserve la valeur après dur, remove (par défaut) revient à la valeur d’origine. |
Exemple de rendu concret
Voici une icône associée à un <text> d’astuce, invisible par défaut, qui apparaît instantanément dès que le curseur survole l’icône, sans le moindre fondu.
<svg viewBox="0 0 220 80" xmlns="http://www.w3.org/2000/svg">
<rect id="icone" x="20" y="20" width="40" height="40" rx="8" fill="#2563eb" />
<text x="72" y="45" font-size="14" fill="#111827" visibility="hidden">
Astuce disponible ici
<set
attributeName="visibility"
to="visible"
begin="icone.mouseover"
dur="2s"
/>
</text>
</svg>Différence avec <animate>
La différence avec <animate> tient tout entière dans le mot interpolation. <animate> construit une trajectoire de valeurs entre from et to, en douceur, sur la durée définie par dur : une largeur passe progressivement de 0 à 200 pixels, une opacité glisse de 1 à 0. <set> ne construit rien de tel : il n’accepte ni from, ni values, ni les courbes d’accélération que l’on peut régler ailleurs avec keySplines. Il bascule une valeur, un point final assumé comme tel, sans détour. C’est un choix logique pour des attributs qui n’ont pas vraiment de sens intermédiaire : on ne peut pas être à moitié visible ou à moitié display: block, alors qu’on peut très bien être à moitié transparent.
Piège classique
Le piège le plus courant consiste à écrire un attribut from sur un <set> en espérant une transition progressive entre deux valeurs : cet attribut est tout simplement ignoré, puisque <set> ne sait pas interpoler quoi que ce soit. Le second piège touche à fill : sans fill="freeze", la valeur fixée par <set> revient à son état d’origine une fois dur écoulé, ce qui peut donner l’impression qu’un panneau révélé au clic se referme tout seul quelques secondes plus tard, sans raison apparente pour qui n’a pas lu la documentation.
<set> ignore silencieusement tout attribut from placé sur lui : si une transition progressive est nécessaire, c’est <animate> qu’il faut utiliser, jamais <set>.Cas d’usage réel
Une bulle d’aide qui apparaît instantanément au survol d’une icône, sans fondu ni délai, pour un retour immédiat à l’utilisateur. Un badge de statut dont l’attribut fill bascule d’un gris neutre à un vert franc dès qu’une tâche passe à « terminé », sans transition de couleur qui ralentirait la lecture de l’information. Un élément dont l’attribut display passe de none à inline pour révéler un menu au clic, une bascule binaire pour laquelle une interpolation progressive n’aurait de toute façon aucun sens visuel.
<set> ?Non, <set> ne prend en charge aucune interpolation : la valeur change instantanément, sans étape intermédiaire. Pour un fondu progressif, il faut utiliser <animate> sur l’attribut opacity, avec un attribut from et un attribut to.
begin sur un <set> ?Il définit le moment où le changement de valeur doit avoir lieu : un délai fixe comme begin="2s", ou un événement comme begin="monBouton.click", ce qui permet de déclencher <set> précisément au clic sur un autre élément du document.
<set> peut-il cibler n’importe quel attribut du SVG ?En théorie oui, mais il est surtout utile pour des attributs qui n’ont pas de valeur intermédiaire sensée, comme visibility, display ou href. Pour une couleur, une largeur ou une position, <animate> ou <animateTransform> offrent un rendu bien plus naturel grâce à leur interpolation progressive.