SVG Stroking
Scopri le proprietà stroke di SVG con esempi eseguibili: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset e altro.
Stilizzare i contorni SVG con le proprietà stroke
Il stroke di un elemento SVG è il tratto applicato lungo il contorno di una forma, una linea o un testo — al contrario del fill, che colora l'interno. SVG offre una famiglia di proprietà stroke-* che controllano ogni aspetto di quel contorno: colore, spessore, trasparenza, come terminano le estremità, come si uniscono gli angoli e se è continuo o tratteggiato.
Queste proprietà sono attributi di presentazione, quindi è possibile impostarle direttamente su un elemento (stroke="purple") oppure tramite CSS (stroke: purple;). Vengono anche ereditate, ed è per questo che è comune impostarle una sola volta su un elemento <g> (gruppo) e lasciare che le forme figlie le ereditino.
Questo capitolo illustra l'intero insieme di proprietà stroke. Per le forme su cui applicare lo stroke, consulta SVG Path, SVG Line e SVG Text. Se sei alle prime armi con SVG, inizia dall'Introduzione a SVG e tieni a portata di mano il Riferimento SVG per una consultazione rapida di ogni attributo.
Le proprietà stroke in sintesi:
stroke— il colore (o altro tratto) del contorno.stroke-width— lo spessore del contorno.stroke-opacity— la trasparenza dello stroke, da0a1.stroke-linecap— la forma disegnata alle estremità aperte di una linea:butt,roundosquare.stroke-linejoin— la forma disegnata nel punto in cui si incontrano due segmenti di linea:miter,roundobevel.stroke-miterlimit— fino a che punto un join di tipomiterpuò estendersi prima di ricadere su unbevel.stroke-dasharray— lo schema di tratti e spazi per un contorno tratteggiato.stroke-dashoffset— a che punto lungo il percorso inizia lo schema di tratteggio.
La proprietà stroke
La proprietà stroke imposta il colore del contorno. Accetta qualsiasi valore di colore CSS — un nome di colore, un codice esadecimale, rgb(), hsl() o un riferimento a un gradiente o a un pattern. Per impostazione predefinita le forme non hanno stroke (none), quindi nulla viene disegnato finché non se ne imposta uno.
Nell'esempio seguente, fill="none" è impostato sul gruppo in modo che siano visibili solo i contorni, e ogni percorso è disegnato con uno stroke di colore diverso.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
Sorry, your browser doesn't support inline SVG.
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Il testo "Sorry, your browser doesn't support inline SVG." è contenuto di fallback. Deve essere un nodo di testo figlio diretto dell'elemento <svg> affinché un browser privo del supporto SVG inline lo mostri al posto del grafico. I browser moderni lo ignorano e renderizzano l'SVG.
La proprietà stroke-width
La proprietà stroke-width imposta lo spessore del contorno. Lo stroke viene disegnato centrato sul percorso, quindi metà della sua larghezza si trova su ciascun lato della linea geometrica.
Un numero da solo viene interpretato in unità utente (il sistema di coordinate SVG) — stroke-width="5" e stroke-width="5px" sono equivalenti in un SVG semplice. È possibile usare anche unità CSS esplicite (px, em, pt) o una percentuale, che viene risolta rispetto alla diagonale del viewport SVG anziché alla sua larghezza o altezza.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La proprietà stroke-opacity
La proprietà stroke-opacity controlla la trasparenza del solo stroke, indipendentemente dall'opacità del fill. Accetta un numero da 0 (completamente trasparente) a 1 (completamente opaco); un valore come 0.5 rende lo stroke semitrasparente. È utile per sovrapporre contorni o per lasciare trasparire lo sfondo attraverso un contorno senza influire sul fill della forma.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="purple" stroke-width="8">
<path stroke-opacity="1" d="M5 30 l215 0" />
<path stroke-opacity="0.5" d="M5 60 l215 0" />
<path stroke-opacity="0.2" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La proprietà stroke-linecap
La proprietà stroke-linecap definisce la forma disegnata alle estremità aperte di un percorso con stroke. Accetta tre valori:
butt(predefinito) — lo stroke si ferma esattamente all'endpoint del percorso con un bordo piatto e nessuna estensione. La lunghezza disegnata è uguale alla lunghezza geometrica del percorso.round— viene aggiunto a ogni estremità un semicerchio il cui raggio è pari alla metà della larghezza dello stroke; la linea si estende quindi oltre l'endpoint distroke-width / 2e termina con una curva morbida.square— viene aggiunto un cap piatto che si estende oltre l'endpoint distroke-width / 2. Visivamente è simile abuttma più lungo; l'estensione su ciascuna estremità è identica a quella diround, ma con un bordo piatto anziché curvo.
La differenza è più visibile con uno stroke spesso. Si noti come le linee round e square appaiano leggermente più lunghe della linea butt, anche se tutti e tre i percorsi condividono le stesse coordinate.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La proprietà stroke-linejoin
La proprietà stroke-linejoin definisce la forma usata nel punto in cui si incontrano due segmenti di linea di un percorso — gli angoli. Accetta tre valori comuni:
miter(predefinito) — i bordi esterni dei due segmenti vengono estesi fino a incontrarsi in un punto acuto.round— l'angolo viene arrotondato con un arco.bevel— l'angolo viene tagliato con un bordo piatto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="orange" stroke-width="12">
<path stroke-linejoin="miter" d="M15 90 L40 20 L65 90" />
<path stroke-linejoin="round" d="M105 90 L130 20 L155 90" />
<path stroke-linejoin="bevel" d="M185 90 L210 20 L235 90" />
</g>
</svg>
</body>
</html>La proprietà stroke-miterlimit
Quando stroke-linejoin è miter, angoli molto acuti possono produrre punte estremamente lunghe e appuntite. La proprietà stroke-miterlimit limita la lunghezza massima di tale punta. Imposta il rapporto massimo consentito tra la lunghezza del miter e la larghezza dello stroke, dove la lunghezza del miter è la distanza dall'angolo interno alla punta esterna del punto. Se il rapporto di un join supererebbe il limite, quel join ricade silenziosamente su un bevel.
Il valore predefinito è 4, il che significa che un miter può estendersi fino a quattro volte la larghezza dello stroke prima di essere troncato (questo preserva la punta per qualsiasi angolo di circa 29° o più largo). Quanto più è acuto l'angolo, tanto più lungo è il miter; di conseguenza, quanto più basso si imposta il limite, tanto più ampio è l'angolo al quale gli angoli iniziano a diventare bevel. Un limite di 1 trasforma in bevel quasi ogni angolo che non è una linea retta; un limite elevato come 10 consente anche punte molto accentuate. Il valore deve essere almeno 1.
Nell'esempio seguente entrambi i percorsi formano la stessa punta acuta, ma quello a sinistra (stroke-miterlimit="1") viene forzato in un bevel, mentre quello a destra (stroke-miterlimit="10") mantiene la sua punta.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="purple" stroke-width="10" stroke-linejoin="miter">
<path stroke-miterlimit="1" d="M20 100 L45 25 L70 100" />
<path stroke-miterlimit="10" d="M120 100 L145 25 L170 100" />
</g>
</svg>
</body>
</html>La proprietà stroke-dasharray
La proprietà stroke-dasharray trasforma un contorno continuo in uno tratteggiato. Il suo valore è un elenco di numeri separati da virgole o spazi che descrivono le lunghezze di tratti e spazi, applicati in ordine alternato lungo il percorso:
- Un singolo valore come
stroke-dasharray="10"produce tratti e spazi di uguale lunghezza (10,10). - Due valori come
stroke-dasharray="3,5"indicano un tratto di3unità seguito da uno spazio di5unità, ripetuti. - Con un numero pari di valori, l'elenco viene usato così com'è e si ripete.
Se si fornisce un numero dispari di valori, SVG ripete l'elenco una seconda volta per renderlo pari, in modo che i ruoli tratto/spazio si alternino. Ad esempio, stroke-dasharray="30,15,10,10,10,15" viene letto come uno schema: tratto 30, spazio 15, tratto 10, spazio 10, tratto 10, spazio 15, poi si ripete.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La proprietà stroke-dashoffset
La proprietà stroke-dashoffset sposta il punto di inizio dello schema di tratteggio lungo il percorso. Un valore di 0 (predefinito) avvia lo schema al punto iniziale del percorso; un valore positivo sposta il punto di partenza in avanti lungo il percorso, mentre un valore negativo lo sposta indietro. Questo è ciò che rende possibile animare effetti di "formiche in marcia" o disegno progressivo di linee modificando gradualmente l'offset.
Nell'esempio seguente tutte e tre le linee condividono lo stesso schema di tratteggio ma lo avviano con offset diversi, per cui i tratti appaiono sfasati l'uno rispetto all'altro.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen" stroke-width="5" stroke-dasharray="20,10">
<path stroke-dashoffset="0" d="M5 30 l215 0" />
<path stroke-dashoffset="10" d="M5 60 l215 0" />
<path stroke-dashoffset="20" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Animazione con stroke-dashoffset
Poiché l'offset può essere animato, stroke-dashoffset è alla base di due effetti molto utilizzati:
- Formiche in marcia — si anima l'offset per un intero periodo di tratto in modo che i tratti sembrino scorrere lungo il contorno (come una selezione a linee tratteggiate animate).
- Disegno progressivo — si imposta
stroke-dasharraypari alla lunghezza totale del percorso in modo che l'intero percorso diventi un unico tratto lungo, poi si anima l'offset da quella lunghezza fino a0in modo che la linea sembri disegnarsi da sola.
Il CSS seguente produce l'effetto formiche in marcia. L'animazione va da un offset di 0 a 30 (la lunghezza di un ciclo tratto-più-spazio 15,15), il che rende il loop continuo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ants {
stroke: purple;
stroke-width: 3;
fill: none;
stroke-dasharray: 15, 15;
animation: march 1s linear infinite;
}
@keyframes march {
to {
stroke-dashoffset: 30;
}
}
</style>
</head>
<body>
<svg width="220" height="120">
<rect class="ants" x="10" y="10" width="200" height="100" />
</svg>
</body>
</html>Per disegnare forme intere in questo modo, consulta SVG Path e SVG Line; l'elenco completo degli attributi stroke si trova nel Riferimento SVG.