Proprietà CSS stroke-width
Come usare la proprietà CSS stroke-width per impostare la larghezza del tratto. Descrizione della proprietà e valori con esempi.
La proprietà CSS stroke-width imposta lo spessore del contorno (il "tratto") disegnato attorno a una forma SVG o a un testo. Il tratto è la linea dipinta che segue il percorso della forma; stroke-width controlla quanto sia spessa quella linea.
Questa pagina illustra la sintassi, i valori accettati (lunghezze e percentuali), l'interazione di stroke-width con gli attributi di presentazione SVG e le insidie legate alle unità e al ridimensionamento del viewBox.
Perché usare stroke-width
In SVG, il contorno di una forma e il suo interno vengono dipinti separatamente: la proprietà stroke dipinge il contorno e fill dipinge l'interno. Un tratto è visibile solo se ha una larghezza diversa da zero, quindi stroke-width è ciò che fa apparire effettivamente un contorno. Usala per rendere i bordi più spessi o più sottili, per tracciare griglie a linea sottilissima o per creare icone e testo con contorni in grassetto.
stroke-width vs. l'attributo SVG
È possibile impostare la larghezza del tratto in due modi: come attributo di presentazione SVG nel markup (stroke-width="3") o come proprietà CSS. Quando sono presenti entrambi, vince CSS — una regola CSS (o uno style inline) ha la precedenza sull'attributo di presentazione. Questo è il motivo più comune per cui un valore impostato nel markup SVG sembra essere "ignorato": un foglio di stile lo sta sovrascrivendo.
<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />stroke-width è un attributo di presentazione e può essere applicato a qualsiasi elemento, ma può avere effetto solo sui seguenti elementi: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> e <tspan>.
Le unità come px o em sono obbligatorie, tranne quando il valore è 0.
| Valore iniziale | 1 |
|---|---|
| Si applica a | Elementi di forme e contenuto testuale. |
| Ereditato | Sì. |
| Animabile | Sì. |
| Versione | SVG 1.1 Specification |
| Sintassi DOM | Object.strokeWidth = "0.5"; |
Sintassi
stroke-width: length | percentage | initial | inherit;La larghezza è centrata sul percorso: metà viene dipinta all'interno del bordo della forma e metà all'esterno. Quindi un stroke-width di 4 su un cerchio di raggio 3 aggiunge 2 unità oltre il raggio e si sovrappone di 2 unità verso l'interno.
Esempio della proprietà stroke-width:
Esempio di codice CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
</svg>
</body>
</html>Risultato
Esempio della proprietà stroke-width con il valore "length":
Altro esempio di codice CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
</svg>
</body>
</html>Esempio della proprietà stroke-width con il valore "%":
Una percentuale viene calcolata rispetto alla diagonale dell'SVG — in particolare la diagonale del viewport (sqrt(width² + height²) / sqrt(2)), non rispetto alla dimensione della forma stessa. Ciò rende le larghezze percentuali utili quando si vuole che il tratto si ridimensioni insieme al disegno.
Esempio CSS stroke-width con valore percentuale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
</svg>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| length | Specifica la larghezza del tratto. |
| percentage | Specifica la larghezza del tratto in %. |
| initial | Imposta il valore predefinito della proprietà. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Note e insidie
- Una larghezza pari a zero nasconde il tratto.
stroke-width: 0non disegna nulla, anche se è impostato un colorestroke. - Le unità sono obbligatorie per valori CSS diversi da zero. All'interno di uno
style/foglio di stile usare2px,0.5em, ecc. La forma numerica pura (stroke-width="3") è valida solo come attributo SVG, dove il numero è interpretato in unità dello spazio utente. - Il tratto si estende su entrambi i lati del percorso. Poiché metà della larghezza si trova all'esterno del bordo della forma, un tratto spesso può fuoriuscire oltre il
viewBoxed essere tagliato. Aggiungere un margine alviewBoxse il contorno risulta troncato. - Si ridimensiona con il
viewBox. Unstroke-widthespresso in unità utente cresce e si riduce man mano che l'SVG viene scalato per adattarsi al proprio contenitore. Per mantenere uno spessore costante sullo schermo indipendentemente dalla scala, aggiungere l'attributo SVGvector-effect="non-scaling-stroke"all'elemento.
Proprietà correlate
stroke— il colore (la pittura) del contorno.stroke-linecap— la forma delle estremità dei percorsi aperti.stroke-dasharray— trasforma il tratto in una linea tratteggiata.stroke-dashoffset— sposta il punto di inizio del motivo tratteggiato.fill— il colore dell'interno di una forma.