SVG Polyline
In questa pagina trovi informazioni sull'elemento SVG <polyline>, con esempi pratici e la possibilità di crearne uno tu stesso.
L'elemento SVG <polyline> disegna una serie di segmenti di retta collegati attraverso un elenco di punti. Immaginalo come un "unisci i puntini" con un unico tratto continuo: fornisci le coordinate e viene tracciata una linea da ciascun punto al successivo. È ideale per grafici a linee, forme a zig-zag, sparkline e qualsiasi contorno aperto a più segmenti.
Questa pagina spiega la sintassi di points, la regola di stile che ogni principiante sbaglia (fill:none), le differenze tra <polyline> e il <polygon> chiuso, e come controllare l'aspetto degli angoli e delle estremità della linea. Per la famiglia completa delle forme di base SVG, consulta il Riferimento SVG.
Descrizione dell'elemento <polyline>
L'elemento SVG <polyline> crea una forma composta esclusivamente da linee rette che collegano più punti. A differenza dell'elemento <polygon> — che traccia automaticamente un segmento di chiusura verso il primo punto per formare una forma sigillata — un <polyline> è una forma aperta: l'ultimo punto non viene ricongiungersi al primo. Se hai bisogno di un contorno chiuso (un triangolo, un esagono, una stella), usa <polygon>. Per forme libere con curve, usa <path>.
La regola più importante: imposta fill:none
Per impostazione predefinita, ogni forma SVG viene riempita con il nero solido (fill:black). Per una forma chiusa questo ha senso, ma un <polyline> è aperta — e SVG la riempie comunque tracciando un bordo di chiusura immaginario e inondando l'area racchiusa di nero. Questo è l'errore più comune tra i principianti: ci si aspetta una linea sottile e si ottiene invece una macchia nera.
La soluzione è disattivare esplicitamente il riempimento con fill:none e affidarsi a stroke per rendere visibile la linea:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Quasi ogni <polyline> che scrivi dovrebbe includere fill:none.
Esempio dell'elemento SVG <polyline>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>La sintassi di points
L'attributo points è un elenco piatto di coppie di coordinate assolute, scritte come x,y. I punti vengono disegnati nell'ordine in cui sono elencati, e ogni x,y è misurato dall'angolo in alto a sinistra del sistema di coordinate SVG (x cresce verso destra, y cresce verso il basso).
SVG è indulgente riguardo ai separatori tra i numeri — virgole e spazi bianchi sono intercambiabili. Tutti questi definiscono gli stessi tre punti:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Una convenzione comune e leggibile è mettere una virgola all'interno di ciascuna coppia e uno spazio tra le coppie, come in points="30,30 50,35 70,50". È necessario un numero pari di coordinate; un numero dispari è un errore.
Esempio dell'elemento SVG <polyline> con linee rette:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Qui la scala sembra corretta perché fill:white corrisponde per caso allo sfondo della pagina — ma è una trappola. Su uno sfondo colorato o con pattern, il riempimento bianco della forma aperta risulterebbe visibile. Usare fill:none è la scelta più robusta.
Esempio con stroke-linecap e stroke-linejoin:
Due proprietà di presentazione controllano l'aspetto di una polilinea tracciata: stroke-linecap dà forma alle due estremità aperte della linea (butt, round o square), e stroke-linejoin dà forma agli angoli dove i segmenti si incontrano (miter, round o bevel). Sono più visibili su tratti spessi:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Confronta l'angolo appuntito della linea sinistra (teal) con l'angolo morbido di quella destra (tomato). Per approfondire queste e altre opzioni di tratto, consulta SVG Stroking.
Attributi specifici di <polyline>
Solo due attributi appartengono veramente all'elemento <polyline> — tutto il resto che imposti su di esso (fill, stroke, stroke-width e così via) sono proprietà di presentazione ereditate dal modello di presentazione generale di SVG, trattate separatamente di seguito.
| Attributo | Descrizione |
|---|---|
| points | L'elenco dei punti (coppie di coordinate assolute x,y) che definiscono la polilinea. È l'unico attributo obbligatorio. |
| pathLength | La lunghezza totale della linea in unità utente, usata per calibrare gli effetti di tratto (come i tratteggi). |
Proprietà di presentazione (ereditate, non specifiche di polyline)
fill, stroke, stroke-linecap e stroke-linejoin non sono esclusive di <polyline> — sono proprietà di presentazione CSS che si applicano alla maggior parte degli elementi grafici SVG e possono essere impostate come attributi XML (stroke="purple") o tramite CSS (style="stroke:purple"). Vengono ereditate e sovrascritte come qualsiasi altro CSS, ecco perché sono elencate qui piuttosto che come attributi dell'elemento.
| Proprietà | Descrizione |
|---|---|
| fill | Il colore usato per riempire l'interno (chiuso automaticamente). Imposta fill:none per una linea aperta. |
| stroke | Il colore della linea stessa. |
| stroke-width | Lo spessore della linea. |
| stroke-linejoin | Il tipo di angolo creato dove due segmenti si incontrano: miter, round o bevel. |
| stroke-linecap | La forma delle estremità aperte della linea: butt, round o square. |
L'elemento SVG <polyline> supporta anche gli Attributi Globali e gli Attributi Evento.