Proprietà CSS stroke-dasharray
Come usare la proprietà CSS stroke-dasharray per creare linee tratteggiate su elementi SVG. Scopri i valori con esempi pratici.
La proprietà stroke-dasharray controlla il pattern di trattini e spazi usato per disegnare il contorno (stroke) di una forma SVG. Invece di una linea continua, il tratto viene suddiviso in alternanza di trattini e spazi, permettendo di disegnare bordi tratteggiati e punteggiati, separatori e le linee utilizzate nelle animazioni di disegno del tratto.
Questa pagina illustra come viene interpretato l'elenco dei valori, la regola di ripetizione per conteggi dispari che trae in inganno la maggior parte delle persone, i casi d'uso più comuni e come stroke-dasharray interagisce con le proprietà correlate.
Come funziona l'elenco dei valori
stroke-dasharray accetta none oppure un <dasharray> — un elenco di lunghezze o percentuali separate da virgole e/o spazi. I numeri vengono letti in ordine come trattino, spazio, trattino, spazio…, e l'intera sequenza si ripete lungo il percorso:
- Un solo valore —
4disegna un trattino di 4, poi uno spazio di 4, e si ripete. Trattini e spazi uguali. - Due valori —
8 2disegna un trattino di 8 unità, uno spazio di 2 unità, poi si ripete. Questa è la forma più comune. - Più valori —
4 1 2 1cicla attraverso trattino 4, spazio 1, trattino 2, spazio 1, poi ricomincia.
Il trabocchetto principale: se si fornisce un numero dispari di valori, l'elenco viene duplicato per renderlo pari. Quindi 5 3 2 si comporta come 5 3 2 5 3 2, il che significa trattino 5, spazio 3, trattino 2, trattino 5, spazio 3, trattino 2 — i ruoli di ciascun numero si invertono al secondo passaggio. Usa un conteggio pari ogni volta che vuoi un pattern ripetuto e prevedibile.
Un valore 0 per un trattino produce un punto quando combinato con stroke-linecap: round, che è il modo in cui si creano le linee punteggiate arrotondate.
Casi d'uso comuni
- Bordi tratteggiati e punteggiati o separatori su icone e illustrazioni, dove un CSS
bordernon può seguire un percorso curvo o diagonale. - Animazioni di disegno ("self-drawing"), dove
stroke-dasharrayè impostato sulla lunghezza del percorso e stroke-dashoffset viene animato da quella lunghezza fino a0, facendo apparire il tratto come se si disegnasse da solo. - Anelli di progresso e caricatori, dove animare il trattino e l'offset rivela un tratto circolare.
Gli stili inline CSS sovrascrivono gli attributi di presentazione SVG. Per esempio, uno stile inline stroke-dasharray: 4; ha la precedenza sull'attributo di presentazione stroke-dasharray="4".
La proprietà stroke-dasharray può essere usata sia come proprietà CSS che come attributo di presentazione SVG. Può essere applicata a qualsiasi elemento, ma influisce solo sui seguenti elementi: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> e <tspan>.
| Valore iniziale | none |
|---|---|
| Si applica a | Elementi di forma e contenuto testuale. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | Specifica SVG 1.1 |
| Sintassi DOM | Object.strokeDasharray = "none"; |
Sintassi
Sintassi CSS stroke-dasharray
stroke-dasharray: none | <dasharray> | initial | inherit;Esempio della proprietà stroke-dasharray:
Esempio di codice CSS stroke-dasharray
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="6,6" d="M5 20 l215 0" />
<path stroke-dasharray="8,10" d="M5 40 l215 0" />
<path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Risultato
Esempio della proprietà stroke-dasharray con l'elemento <line>:
Altro esempio di codice CSS stroke-dasharray
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
<line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
stroke-dasharray="3" />
<line x1="0" y1="5" x2="30" y2="5" stroke="#000"
stroke-dasharray="5 1" />
<line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
stroke-dasharray="4 2 2" />
<line x1="0" y1="9" x2="30" y2="9" stroke="#666"
stroke-dasharray="4 1 3 2" />
</svg>
</body>
</html>In questo esempio ogni <line> usa un pattern diverso: una linea continua (nessun dasharray), poi 3 (trattini e spazi uguali), 5 1 (trattini lunghi, spazi minimi) e i pattern con conteggio dispari 4 2 2 e 4 1 3 2, che si ripetono su due passaggi come descritto sopra.
Valori
| Valore | Descrizione |
|---|---|
| none | Non viene usato alcun trattino. |
<dasharray> | Viene usato un pattern di trattini. |
| initial | Imposta il valore predefinito della proprietà. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
stroke-dasharray è una delle diverse proprietà che stilizzano il contorno di un SVG. Spesso la combinerai con:
- stroke-dashoffset — sposta il punto di inizio del pattern di trattini; è la chiave per le animazioni di disegno delle linee.
- stroke-linecap — controlla la forma delle estremità dei trattini (
butt,round,square); usaroundper trasformare i trattini di lunghezza0in punti. - stroke-width — imposta lo spessore del tratto.
- stroke — imposta il colore del tratto.
- fill — imposta il colore interno della forma.