Proprietà CSS stroke-linecap

La proprietà stroke-linecap specifica la forma da utilizzare alle estremità aperte di un tratto SVG. Modifica solo il modo in cui vengono disegnati i due punti terminali di un percorso aperto — non ha alcun effetto sugli angoli dove si incontrano due segmenti di linea, né sulle forme chiuse che non hanno estremità aperte.

Questa pagina spiega come appare ciascun valore del cap, come stroke-linecap interagisce con la specificità CSS e il caso speciale del "percorso a lunghezza zero" che consente di disegnare un singolo punto.

Quando usarla?

Ogni volta che si disegnano linee o percorsi aperti in SVG e si vuole controllare come termina la linea:

round è la scelta più comune per i tratti in stile disegnato a mano, barre di avanzamento e linee di grafici — dà un aspetto morbido e rifinito.
square è utile quando si vuole che la linea si estenda leggermente oltre il suo punto finale (ad esempio, per far sì che due linee adiacenti si tocchino con precisione).
butt (il valore predefinito) taglia la linea esattamente alla coordinata finale — sceglierlo quando la lunghezza precisa è importante.

Un trucco pratico: un percorso con lunghezza zero (un tratto che inizia e finisce nello stesso punto) viene reso come un singolo punto quando stroke-linecap è round o square, e non viene reso come nulla quando è butt. Questo è il metodo standard per disegnare punti in SVG.

Proprietà CSS o attributo di presentazione?

stroke-linecap è sia una proprietà CSS che un attributo di presentazione SVG. Ciò offre due modi per impostarlo:

Come attributo sull'elemento: <path stroke-linecap="round" />
Come dichiarazione CSS: path { stroke-linecap: round; }

Un attributo di presentazione si comporta come lo stile con la priorità più bassa, quindi qualsiasi regola CSS lo sovrascrive. style="…" inline e i fogli di stile esterni hanno la precedenza sull'attributo; tra le regole CSS si applica la normale specificità.

Informazione

La proprietà stroke-linecap può essere applicata a qualsiasi elemento, ma influisce solo sulle forme SVG e sugli elementi di contenuto testuale: <path>, <line>, <polyline>, <text>, <textPath> e <tspan>. Non influisce sulle forme chiuse come <rect>, <circle> o <polygon>, poiché queste non hanno estremità aperte.

Valore iniziale	butt
Si applica a	Forme ed elementi di contenuto testuale.
Ereditata	Sì.
Animabile	No.
Versione	Specifica SVG 1.1
Sintassi DOM	Object.strokeLinecap = "round";

Sintassi

Sintassi CSS stroke-linecap

stroke-linecap: butt | square | round | initial | inherit;

Esempio della proprietà stroke-linecap:

Esempio di codice CSS stroke-linecap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Con butt, il tratto verde si ferma esattamente alle coordinate (1,1) e (5,1) — indicate dai punti blu — quindi la sua lunghezza visibile corrisponde alla lunghezza del percorso. Il percorso a lunghezza zero in (3,3) non viene reso affatto.

Risultato

Esempio della proprietà stroke-linecap con il valore "round":

Esempio CSS stroke-linecap con round

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "round" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
      <!-- Effect of the "round" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
      <!--
      the following pink lines highlight the
      position of the path for each stroke
      -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Con round, una semicirconferenza di raggio stroke-width / 2 viene aggiunta oltre ogni punto terminale, quindi la linea verde ora supera leggermente i punti blu. Il percorso a lunghezza zero in (3,3) diventa un cerchio pieno — è il trucco del punto in azione.

Esempio della proprietà stroke-linecap con il valore "square":

Esempio CSS stroke-linecap con square

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Provalo tu stesso »

square è simile a round nel senso che il tratto si estende oltre il punto terminale di stroke-width / 2, ma il cap aggiunto è un rettangolo invece di una semicirconferenza, dando un bordo piatto. Il percorso a lunghezza zero in (3,3) viene reso come un piccolo quadrato.

Valori

Valore	Descrizione
`butt`	Predefinito. Termina il tratto in modo piatto, esattamente al punto finale, senza aggiungere alcuna estensione. Un sottopercorso a lunghezza zero non viene reso.
`round`	Aggiunge un cap semicircolare di raggio `stroke-width / 2` oltre ogni punto terminale, dando estremità arrotondate. Un sottopercorso a lunghezza zero viene reso come un punto.
`square`	Aggiunge un cap rettangolare che si estende di `stroke-width / 2` oltre ogni punto terminale, dando estremità piatte che superano il percorso. Un sottopercorso a lunghezza zero viene reso come un piccolo quadrato.
`initial`	Reimposta la proprietà al suo valore predefinito (`butt`).
`inherit`	Eredita il valore dall'elemento genitore. `stroke-linecap` è ereditata per impostazione predefinita.

Proprietà correlate

stroke-linecap è una delle diverse proprietà di tratto SVG che controllano come vengono disegnate le linee:

stroke — imposta il colore del tratto.
stroke-width — imposta lo spessore del tratto (e quindi la dimensione dei cap).
stroke-dasharray — trasforma un tratto continuo in trattini; ogni trattino ottiene i propri cap.
stroke-dashoffset — sposta il punto di inizio del pattern di trattini.
fill — imposta il colore utilizzato per riempire l'interno di una forma.

Esercizio

Pratica

Cosa influenza la proprietà 'stroke-linecap' in CSS?

Indica il colore della linea del tratto.Definisce la forma del tratto ai suoi punti finali.Imposta la larghezza della linea del tratto.Modifica la dimensione del testo all'interno di una linea del tratto.Determina lo stile delle estremità della linea.