La stroke-dashoffsetproprietà in CSS definisce la posizione lungo un percorso SVG in cui strokeinizierà il trattino di a . Più alto è il numero, più avanti nel percorso inizieranno i trattini.
.module ( stroke-dashoffset: 100; )Ricorda:
- Questo sarà sovrascrivere un attributo di presentazione
- Questo non sovrascriverà uno stile in linea ad es
Valori
La stroke-dashoffsetproprietà può accettare una percentuale o un valore numerico.
stroke-dashoffset: 100stroke-dashoffset: 25%
Notare che le unità (cioè eme px) non sono richieste. Un numero senza unità viene visualizzato in unità pixel. La percentuale è relativa alla percentuale della visualizzazione corrente.
Vedi la proprietà Pen stroke-dashoffset di CSS-Tricks (@ css-tricks) su CodePen.
Ottenere difficile con stroke-dashoffset
Hai mai visto quelle fantastiche demo in cui una forma SVG sembra disegnarsi da sola? Questo è un trucco che anima l' stroke-dashoffsetelemento di un elemento insieme alla stroke-dasharrayproprietà.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Vedi l'esempio di base della penna di disegno SVG, indietro e avanti di Chris Coyier (@chriscoyier) su CodePen.
Copriamo questa tecnica in modo molto più dettagliato in questo post.
Relazionato
strokestroke-dasharraystroke-linecapstroke-width
Maggiori informazioni
- Specifiche SVG 1.1
- MDN su riempimenti e tratti
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| sì | sì | sì | sì | 9+ | 4.4+ | sì |