Animazione del tratto SVG: prepara un percorso unico

L'animazione del tratto SVG può rivelare una linea spostando un segmento tratteggiato lungo il tracciato. Usa stroke-dasharray per definire il segmento e lo spazio, poi anima stroke-dashoffset finché il tratto diventa visibile. MDN li documenta come proprietà di colorazione del tratto.

Il tracciato sorgente determina ciò che sembra essere disegnato. Un tracciato aperto può seguire il percorso di una penna attraverso il centro di un segno. Un contorno riempito descrive il bordo del segno. Aggiungere un tratto a quel contorno manda l'animazione lungo i suoi bordi; le sole impostazioni del tratteggio non rivelano il riempimento.

Parti da una piccola forma prima di temporizzare un logo completo. Gli esempi scritti a mano qui sotto separano percorso di disegno, grafica riempita e perimetro, così puoi scegliere la geometria necessaria per l'animazione.

Per spostare un'intera icona lungo una curva, usa il flusso motion-path SVG, che mantiene il percorso di movimento separato dalla grafica.

Inizia con un tracciato aperto dotato di tratto

Questo tracciato originale va a destra, poi verso l'alto. Il suo fill è disabilitato, quindi il segno visibile deriva interamente dal tratto:

<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>

Usa questo CSS per una comparsa di due secondi:

.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" calibra le operazioni basate sulla distanza su una lunghezza dichiarata di 100. Il riferimento pathLength descrive questa normalizzazione. Un solo valore di dash-array si ripete come segmento e spazio, quindi 100 fornisce un segmento lungo quanto l'intero tracciato seguito da uno spazio altrettanto lungo. Spostare quel motivo di 100 nasconde il tratto in questo esempio; portare l'offset a zero lo rivela.

Qui usa numeri senza unità. stroke-dashoffset: 100% non sostituisce 100 unità di tracciato normalizzate. Il riferimento MDN sull'offset del tratteggio afferma che i valori percentuali usano la diagonale normalizzata del viewport SVG anziché la lunghezza totale del tracciato.

L'esempio usa un'estremità butt per rendere più facile controllare l'inizio in pausa. Altri stili di estremità possono cambiare l'aspetto delle estremità del segmento. Scegli lo stile adatto alla grafica, poi controlla i fotogrammi iniziale e finale alla dimensione effettiva dell'icona. Per ripetizioni decorative, confronta contorni puntinati e spaziatura delle estremità prima di scegliere le lunghezze di segmenti e spazi.

Confronta il percorso con un contorno riempito

Una striscia spessa piegata può sembrare simile a quella linea con tratto pur contenendo una geometria diversa. Questo secondo tracciato scritto a mano percorre il bordo della striscia e si chiude con Z:

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

Con la seguente colorazione, cambiare l'offset del tratteggio non ha alcun effetto visibile:

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

La striscia resta riempita perché non c'è un tratto da tratteggiare. La specifica W3C sulla colorazione SVG distingue la colorazione dell'interno di una forma da quella del suo tratto.

Se invece imposti fill: none, aggiungi un tratto e animi quel tracciato chiuso, il tratto segue il perimetro: lungo un bordo, attraverso un'estremità e indietro lungo l'altro bordo. Non diventa un unico percorso attraverso il centro della striscia.

Questa distinzione spiega anche perché un ricalco può produrre doppie linee di taglio. In un'animazione, il risultato indesiderato può essere una linea che percorre l'esterno di un segno di penna. Se l'effetto previsto richiede un percorso centrale, usa la guida agli SVG a linea singola per controllare o preparare quella geometria.

Controlla inizio, metà e fine

Per esaminare l'esempio in pausa, disabilita l'animazione e imposta stroke-dashoffset a 100, 50 e 0. Questi valori corrispondono all'inizio, alla comparsa a metà e allo stato finale di questo tracciato normalizzato. Non sono percentuali inserite nella proprietà CSS.

Mantieni tutte e tre le versioni in una piccola pagina di test con pulsanti per questi stati. L'impostazione intermedia è particolarmente utile: le forme complete possono sembrare simili, mentre i loro percorsi di disegno diventano evidenti a metà della comparsa.

Abbiamo verificato questi tracciati scritti a mano in un browser con offset 100, 50 e 0 ed eseguito una volta l'animazione di due secondi. La striscia riempita restava visibile mentre percorso e perimetro apparivano diversamente. Questo test dimostra quei tracciati originali; non è un ricalco PerfectVector né un test su tutti i browser.

Se il risultato differisce, controlla la colorazione e gli stili calcolati dell'elemento effettivo. Una regola CSS può prevalere su un attributo di presentazione e un tracciato senza tratto visibile non può mostrare una comparsa tramite tratteggio. La lista di controllo per tratti mancanti aiuta a isolare problemi di colorazione e visualizzazione prima di modificare i tempi dell'animazione.

Decidi il punto iniziale e l'ordine dei tracciati

Il primo tracciato inizia a M30 90, procede orizzontalmente fino a x=100, poi verticalmente fino a y=30. Questa sequenza dà una direzione alla comparsa. Se il disegno deve iniziare dall'estremità superiore, prepara il tracciato in quella direzione anziché presumere che l'animazione conosca il movimento della penna desiderato.

Per un logo con segni separati, decidi quale tracciato debba apparire per primo e quale dopo. Avviare la stessa animazione su ogni tracciato produce comparse simultanee. Una sequenza richiede ritardi espliciti o un'altra organizzazione della timeline. Controlla intersezioni e sovrapposizioni negli stati in pausa perché le forme successive possono coprire un tratto ancora in corso di disegno.

Un disegno composto da più sottotracciati scollegati può richiedere la separazione in elementi per un controllo utile dei tempi. Mantieni distinte le decisioni sul progetto visivo e sul percorso dell'animazione. Unire parti non correlate soltanto per ottenere un tracciato può introdurre un collegamento mai previsto dall'autore.

Una libreria di animazione può aiutare a controllare la sequenza, ma il suo input ha ancora bisogno della geometria corretta. La documentazione Motion sulle animazioni SVG offre il disegno di linee tramite il suo valore animato pathLength. Quel controllo della libreria è un'API separata dalla calibrazione SVG nativa pathLength="100" usata qui; non copiare i valori di un esempio nell'altro senza controllare l'API.

Mantieni disponibile la grafica completa senza movimento

L'esempio CSS usa come valore predefinito un offset di zero e lo cambia soltanto mentre l'animazione viene eseguita. La sua media query per il movimento ridotto disabilita la comparsa e mostra la linea completa. La guida MDN a prefers-reduced-motion spiega come la query rilevi la preferenza dell'utente.

Per una demo interattiva, fornisci un controllo del risultato statico oltre a un pulsante per riprodurre di nuovo l'animazione. Per un'icona d'interfaccia, conserva l'etichetta visibile o il nome accessibile che spiega l'azione. L'animazione non deve essere l'unico modo in cui un lettore scopre il significato della grafica.

Verifica gli stati iniziale, interrotto e completo nella collocazione effettiva. Se un'icona essenziale resta invisibile quando l'animazione non viene eseguita, correggi lo stile di base prima di estendere l'effetto all'intera interfaccia. Una demo isolata riuscita non dimostra ogni risultato relativo a browser, tecnologie assistive o prestazioni.

Prepara grafica raster senza promettere un percorso di penna

Se manca l'originale vettoriale e un simbolo PNG o JPG piatto richiede grafica modificabile, il flusso da immagine a vettore di PerfectVector può preparare un candidato SVG. Confronta sagoma, fori e regioni separate con la sorgente, poi controlla i tracciati scaricati in un editor. Usa quella geometria come grafica da verificare prima di progettare l'animazione.

La vettorializzazione non stabilisce l'ordine originale della penna, non crea la timeline e non garantisce singoli tracciati centrali. Se la comparsa richiede un percorso unico attraverso un tratto, disegnalo o preparalo deliberatamente. Conserva un originale vettoriale esistente quando disponibile. Un SVG che incorpora soltanto un'immagine raster richiede anche il controllo dell'immagine incorporata prima di presumere che il segno visibile sia geometria di tracciati modificabile.

Approva prima la grafica statica, poi la sequenza di disegno. Le guide di modifica del blog trattano la pulizia della sorgente prima del livello di animazione.

FAQ

Perché il mio SVG resta visibile all'inizio di un'animazione del tratto? Controlla se la parte visibile è un riempimento. Le impostazioni dash-array e dash-offset agiscono sul tratto, quindi una regione riempita può restare visibile mentre il tratto è nascosto.

Perché l'animazione disegna entrambi i lati di una linea? Il tracciato può descrivere un contorno chiuso attorno a un segno spesso. Applicargli un tratto segue il perimetro. Prepara un percorso di disegno aperto quando l'effetto richiede una sola linea centrale.

Posso usare 100% per l'intera lunghezza del tracciato? Non come sostituto generale in stroke-dashoffset. Le sue percentuali si riferiscono alla diagonale normalizzata del viewport. L'esempio usa pathLength="100" nativo con valori di tratteggio senza unità.

Convertire un PNG in SVG lo rende pronto per un'animazione della scrittura a mano? La vettorializzazione non implica alcuna garanzia automatica sull'ordine della penna o sulla linea centrale. Esamina la geometria risultante e prepara separatamente i tracciati di disegno e i tempi.

Fonti

1. MDN — stroke-dasharray — Definisce le lunghezze alternate di segmenti e spazi per la colorazione del tratto.
2. MDN — stroke-dashoffset — Spiega gli offset del motivo e il riferimento usato dalle percentuali.
3. MDN — pathLength — Documenta la calibrazione nativa della distanza per tracciati e tratti.
4. W3C — Colorazione SVG — Distingue il comportamento del riempimento da quello del tratto.
5. MDN — prefers-reduced-motion — Documenta la preferenza dell'utente usata per un risultato statico.
6. Motion — Animazione SVG — Descrive l'API separata della libreria per il disegno di linee.

Verifica un percorso all'inizio, a metà e alla fine prima di mettere in sequenza tutta la grafica. Se la sorgente è un simbolo raster, prepara un candidato SVG modificabile, controllane la geometria e progetta separatamente il percorso di disegno.