La stroke-dasharrayproprietà in CSS serve per creare trattini nel tratto di forme SVG. Maggiore è il numero, maggiore sarà lo spazio tra i trattini nel tratto.
.module ( stroke-dasharray: 5; )Ricorda:
- Questo sarà sovrascrivere un attributo di presentazione
- Questo non sovrascriverà uno stile in linea ad es
Valori
La stroke-dasharrayproprietà può accettare qualsiasi lunghezza, inclusi valori senza unità:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
I valori senza unità sono probabilmente la scelta più comune, poiché generalmente è con valori SVG. Diventano unità di lunghezza relative al sistema di coordinate impostato da viewBox.
Vedi la proprietà Pen stroke-dasharray di CSS-Tricks (@ css-tricks) su CodePen.
Ottenere difficile con stroke-dasharray
Hai mai visto quelle fantastiche demo in cui una forma SVG sembra disegnarsi da sola? Questo è un trucco che prende il controllo stroke-dasharraydi un elemento e lo anima insieme alla stroke-dashoffsetproprietà.
.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. Sembra che a IE 11 e versioni precedenti non piaccia animare le proprietà del tratto con @keyframes, quindi fai attenzione.
Relazionato
strokestroke-dashoffsetstroke-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ì |