Animation de contour SVG : prépare un parcours unique

L’animation de contour SVG peut révéler une ligne en déplaçant un tiret sur son tracé. Utilise stroke-dasharray pour définir le tiret et l’espace, puis anime stroke-dashoffset jusqu’à ce que le contour soit visible. MDN les décrit comme des propriétés de peinture des contours.

Le tracé source détermine ce qui semble se dessiner. Un tracé ouvert peut suivre le parcours d’un stylo au milieu d’un symbole. Un contour fermé rempli décrit la limite du symbole. Ajouter un contour à cette forme fait suivre ses bords à l’animation ; les réglages de tirets seuls ne révèlent pas son remplissage.

Commence par une petite forme avant de régler la durée d’un logo complet. Les exemples créés à la main ci-dessous distinguent le parcours de dessin, l’illustration remplie et le périmètre pour choisir la géométrie nécessaire à ton animation.

Pour déplacer une icône entière sur une courbe, utilise le processus de trajectoire SVG, qui garde la trajectoire de déplacement séparée de l’illustration.

Commence par un tracé ouvert avec contour

Ce tracé original va vers la droite puis vers le haut. Son fill est désactivé : le symbole visible vient donc entièrement de son contour :

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Utilise ce CSS pour une apparition de deux secondes :

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" étalonne les opérations fondées sur la distance sur une longueur définie de 100. La référence de pathLength décrit cette normalisation. Une valeur unique de dash-array se répète comme tiret et espace : 100 fournit donc un tiret de longueur complète suivi d’un espace aussi long. Décaler ce motif de 100 cache le contour dans cet exemple ; ramener le décalage à zéro le révèle.

Utilise ici des nombres sans unité. stroke-dashoffset: 100% ne remplace pas 100 unités de tracé normalisées. La référence MDN du décalage des tirets indique que les pourcentages utilisent la diagonale normalisée de la zone d’affichage SVG, et non la longueur totale du tracé.

L’exemple utilise une extrémité butt pour faciliter l’examen du départ en pause. D’autres styles d’extrémités peuvent changer l’apparence des bouts d’un tiret. Choisis le style selon l’illustration, puis vérifie les images initiale et finale à la taille réelle de l’icône. Pour des répétitions décoratives, compare les contours pointillés et l’espacement des extrémités avant de choisir les longueurs de tirets et d’espaces.

Compare le parcours à une forme remplie

Une bande coudée épaisse peut ressembler à cette ligne avec contour tout en contenant une géométrie différente. Ce second tracé créé à la main parcourt la limite de la bande et se ferme avec Z :

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Avec la peinture suivante, changer son décalage de tirets n’a aucun effet visible :

.filled {
  fill: #ef8067;
  stroke: none;
}

La bande reste remplie car aucun contour ne peut recevoir de tirets. La spécification de peinture SVG du W3C distingue la peinture de l’intérieur d’une forme de celle de son contour.

Si tu définis au contraire fill: none, ajoutes un contour et animes ce tracé fermé, le contour suit le périmètre : un bord, une extrémité, puis l’autre bord en sens inverse. Il ne devient pas un parcours unique au centre de la bande.

Cette distinction explique aussi pourquoi une vectorisation peut produire des lignes de découpe doubles. Dans une animation, le résultat indésirable peut être une ligne parcourant l’extérieur d’un trait de stylo. Si l’effet souhaité nécessite un parcours central, utilise le guide des SVG à ligne unique pour examiner ou préparer cette géométrie.

Vérifie le départ, le milieu et la fin

Pour examiner l’exemple en pause, désactive son animation et définis stroke-dashoffset sur 100, 50 et 0. Ces valeurs correspondent au départ, à l’apparition à mi-parcours et à l’état final de ce tracé normalisé. Ce ne sont pas des pourcentages saisis dans la propriété CSS.

Conserve les trois versions dans une petite page de test avec des boutons pour ces états. Le réglage central est particulièrement utile : les formes terminées peuvent paraître similaires, tandis que leur parcours de dessin devient évident pendant l’apparition.

Nous avons vérifié ces tracés créés à la main dans un navigateur aux décalages 100, 50 et 0, et lancé une fois l’animation de deux secondes. La bande remplie restait visible tandis que le parcours et le périmètre se révélaient différemment. Ce test démontre ces tracés originaux ; ce n’est pas une vectorisation PerfectVector ni un test de tous les navigateurs.

Examine la peinture et les styles calculés de l’élément réel si le résultat diffère. Une règle CSS peut remplacer un attribut de présentation, et un tracé sans contour visible ne peut pas montrer une apparition par tirets. La liste de vérification des contours manquants aide à isoler les problèmes de couleur et d’affichage avant d’ajuster la durée d’animation.

Décide du point de départ et de l’ordre des tracés

Le premier tracé commence à M30 90, va horizontalement à x=100, puis verticalement à y=30. Cette séquence donne une direction à l’apparition. Si le dessin doit commencer à l’extrémité supérieure, prépare le tracé dans ce sens au lieu de supposer que l’animation connaît le mouvement de stylo souhaité.

Pour un logo avec des marques séparées, décide quel tracé apparaît d’abord et lequel suit. Lancer la même animation sur chaque tracé produit des apparitions simultanées. Une séquence nécessite des délais explicites ou une autre organisation de la chronologie. Vérifie les intersections et superpositions à l’arrêt, car des formes ultérieures peuvent recouvrir un contour encore en cours de dessin.

Un dessin composé de plusieurs sous-tracés déconnectés peut nécessiter des éléments séparés pour un contrôle utile du temps. Distingue le design visuel des choix de parcours d’animation. Réunir des parties sans lien uniquement pour obtenir un seul tracé peut créer une connexion jamais souhaitée par l’artiste.

Une bibliothèque d’animation peut aider à contrôler la séquence, mais son entrée nécessite encore la bonne géométrie. La documentation d’animation SVG de Motion propose le dessin de lignes via sa valeur animée pathLength. Ce contrôle de bibliothèque est une API distincte de l’étalonnage natif SVG pathLength="100" utilisé ici ; ne copie pas les valeurs d’un exemple dans l’autre sans vérifier l’API.

Garde l’illustration terminée disponible sans mouvement

L’exemple CSS utilise par défaut un décalage nul et le change uniquement pendant l’animation. Sa requête média de réduction des animations désactive l’apparition et affiche la ligne complète. Le guide MDN de prefers-reduced-motion explique comment détecter la préférence de l’utilisateur.

Pour une démonstration interactive, fournis une commande de résultat statique et un bouton de relance. Pour une icône d’interface, conserve le libellé visible ou le nom accessible expliquant l’action. L’animation ne doit pas être le seul moyen de comprendre le sens de l’illustration.

Teste les états initial, interrompu et terminé dans leur placement réel. Si une icône essentielle reste invisible lorsque l’animation ne s’exécute pas, corrige le style de base avant d’étendre l’effet à toute l’interface. Une démonstration isolée réussie ne garantit pas tous les résultats de navigateur, de technologie d’assistance ou de performance.

Prépare une illustration matricielle sans promettre un parcours de stylo

Si l’original vectoriel manque et qu’un symbole plat PNG ou JPG nécessite une illustration modifiable, le processus d’image en vecteur PerfectVector peut préparer un candidat SVG. Compare sa silhouette, ses trous et ses régions séparées à la source, puis examine les tracés téléchargés dans un éditeur. Utilise cette géométrie comme illustration à vérifier avant de planifier l’animation.

La vectorisation ne détermine pas l’ordre original du stylo, ne crée pas ta chronologie et ne garantit pas des tracés centraux uniques. Si l’apparition nécessite un seul parcours au milieu d’un trait, dessine ou prépare ce parcours délibérément. Conserve un original vectoriel existant si disponible. Un SVG qui intègre seulement une image matricielle nécessite aussi la vérification des images intégrées avant de supposer que son symbole visible est une géométrie de tracés modifiable.

Accepte d’abord l’illustration statique, puis la séquence de dessin. Les guides de modification du blog traitent du nettoyage source avant la couche d’animation.

FAQ

Pourquoi mon SVG reste-t-il visible au début d’une animation de contour ? Vérifie si la partie visible est un remplissage. Les réglages dash-array et dash-offset agissent sur le contour : une région remplie peut donc rester visible alors que son contour est caché.

Pourquoi l’animation dessine-t-elle les deux côtés d’une ligne ? Le tracé peut décrire une limite fermée autour d’une marque épaisse. Ajouter un contour à ce tracé suit son périmètre. Prépare un parcours ouvert si l’effet nécessite une ligne unique au centre.

Puis-je utiliser 100% pour toute la longueur du tracé ? Pas comme remplacement général dans stroke-dashoffset. Ses pourcentages se rapportent à la diagonale normalisée de la zone d’affichage. L’exemple utilise le pathLength="100" natif avec des valeurs de tirets sans unité.

Convertir un PNG en SVG le prépare-t-il à une animation d’écriture ? La vectorisation n’offre aucune garantie automatique d’ordre du stylo ou de ligne centrale. Examine la géométrie obtenue et prépare séparément les parcours de dessin et leur chronologie.

Sources

1. MDN — stroke-dasharray — Définit l’alternance des longueurs de tirets et d’espaces pour la peinture des contours.
2. MDN — stroke-dashoffset — Explique les décalages du motif et la référence des pourcentages.
3. MDN — pathLength — Décrit l’étalonnage natif des distances pour les tracés et contours.
4. W3C — peinture SVG — Distingue les comportements de remplissage et de contour.
5. MDN — prefers-reduced-motion — Décrit la préférence de l’utilisateur utilisée pour un résultat statique.
6. Motion — animation SVG — Décrit l’API distincte de dessin de lignes de la bibliothèque.

Teste un parcours au départ, à mi-chemin et à la fin avant de séquencer toute l’illustration. Si ta source est un symbole matriciel, prépare un candidat SVG modifiable, examine sa géométrie et planifie séparément le parcours de dessin.