Proprietà CSS stroke
Come usare la proprietà CSS stroke per disegnare il contorno di un elemento SVG. Scopri i valori con esempi pratici.
La proprietà CSS stroke disegna il contorno (la linea) di una forma SVG o di un testo. Mentre fill colora l'interno di una forma, stroke ne colora il bordo — insieme controllano come vengono disegnati tutti i path, cerchi, rettangoli e testi SVG.
Questa pagina spiega cosa fa stroke, i valori che accetta, come interagisce con le proprietà stroke correlate (larghezza, pattern di trattini, terminazioni della linea) e i problemi comuni in cui ci si imbatte.
Quando usarla?
stroke influisce solo sui contenuti SVG — non ha effetto sugli elementi HTML ordinari come <div> o <p>. Utilizzala quando:
- Disegni icone, grafici o diagrammi inline con
<svg>. - Animi una linea che "si disegna da sola" (combina
strokeconstroke-dasharrayestroke-dashoffset). - Vuoi il contorno di testi SVG senza riempirli.
Puoi trovare i colori web predefiniti nella sezione colori HTML.
Proprietà CSS vs. attributo di presentazione
stroke è particolare: può essere impostata sia come proprietà CSS che come attributo di presentazione SVG scritto direttamente sull'elemento. Queste due righe producono lo stesso risultato:
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Quando entrambe sono presenti, vince il CSS: uno style inline (o qualsiasi regola di foglio di stile) sovrascrive l'attributo di presentazione. Questo permette di impostare un colore predefinito nel markup e sovrascriverlo dal CSS — ad esempio, al passaggio del mouse.
La proprietà stroke può essere utilizzata sia come proprietà CSS che come attributo di presentazione. Può essere applicata a qualsiasi elemento, ma produce effetti solo sui seguenti: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> e <tspan>.
| Valore iniziale | none |
|---|---|
| Si applica a | Forme ed elementi di contenuto testuale. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | SVG 1.1 Specification |
| Sintassi DOM | Object.stroke = "#1c87c9"; |
Sintassi
Sintassi CSS stroke
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Esempio della proprietà stroke:
Esempio di codice CSS stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Risultato
Esempio con forme e CSS
Non è necessario scrivere stroke come attributo — qui viene impostato da un blocco <style>, applicato a più forme contemporaneamente. Nota fill: none in modo che sia visibile solo il contorno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| none | Nessuna pittura viene applicata. |
| color | Imposta un colore solido. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla(). |
| url | Un riferimento URL a un elemento paint server che definisce un server di pittura. |
| context-fill | Utilizza il valore di fill dell'elemento di contesto. |
| context-stroke | Utilizza il valore di stroke dell'elemento di contesto. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Il valore iniziale è none, il che significa che una forma senza stroke viene disegnata senza alcun contorno — anche se stroke-width è impostato.
Proprietà stroke correlate
stroke imposta solo il colore del contorno. Per controllare l'aspetto del contorno, combinala con:
stroke-width— lo spessore della linea.stroke-dasharray— un pattern di trattini/spazi al posto di una linea continua.stroke-dashoffset— dove inizia il pattern di trattini (la chiave per le animazioni di disegno della linea).stroke-linecap— la forma delle terminazioni della linea.
Problemi comuni
- Non appare nulla. Se
stroke-widthè0(il valore predefinito), il contorno è invisibile qualunque colore si scelga. Imposta sempre una larghezza. - La forma è piena. Se vuoi solo il contorno, imposta
fill: none— altrimenti l'interno viene dipinto di nero per impostazione predefinita. - Non funziona su un
<div>.strokeha effetto solo su elementi grafici e di testo SVG:<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>e<tspan>.