W3docs
it
Accedi

SVG Polygon

Informazioni utili sull'elemento SVG <polygon>, con esempi pratici e la possibilità di crearne uno direttamente.

Descrizione dell'elemento <polygon>

L'elemento SVG <polygon> crea una forma chiusa composta da segmenti di linea retta. Un poligono è definito da un elenco di punti angolari (almeno tre) e la forma viene chiusa automaticamente: il browser traccia un segmento finale dall'ultimo punto al primo, quindi non è necessario ripetere la coordinata iniziale.

Questo comportamento di chiusura automatica è la differenza fondamentale tra <polygon> e <polyline>: una polilinea traccia gli stessi segmenti connessi ma lascia il percorso aperto (senza segmento di ritorno al punto iniziale). Utilizza <polygon> per forme piene e chiuse come triangoli, stelle o frecce, e <polyline> per percorsi aperti come linee a zig-zag o grafici.

L'attributo points

La forma è descritta interamente dall'attributo points. Contiene un elenco di coppie di coordinate x,y, scritte in unità dello spazio utente:

points="x1,y1 x2,y2 x3,y3 ..."
  • Ogni coppia corrisponde a un angolo del poligono.
  • Le coppie sono separate da spazi; all'interno di una coppia, i valori x e y sono separati da una virgola (o da uno spazio — 220 30 270 210 è anch'esso valido, ma la forma con virgola è più leggibile).
  • Le coordinate sono assolute, misurate dall'angolo in alto a sinistra della tela SVG, dove y aumenta verso il basso.

Quindi points="220,30 270,210 180,230" definisce tre angoli e, poiché la forma si chiude automaticamente, produce un triangolo.

Esempio dell'elemento SVG <polygon> con tre lati:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250" >
      <polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Provalo tu stesso »

Qui l'attributo points elenca tre angoli — 220,30, 270,210 e 180,230 — e il browser li collega chiudendo la forma in un triangolo.

Stile: fill, stroke e stroke-width

L'aspetto visivo è controllato dagli attributi di presentazione. Questi non sono specifici di <polygon> — si applicano a ogni forma SVG, e ciascuno ha una proprietà CSS equivalente, quindi puoi impostarli inline (come in style="..." sopra), come attributi semplici (fill="yellow"), oppure tramite un foglio di stile CSS:

  • fill — il colore usato per riempire l'interno della forma.
  • stroke — il colore del contorno.
  • stroke-width — lo spessore del contorno, in unità utente.

Poiché sono vere proprietà CSS, una regola di foglio di stile come polygon { fill: yellow; stroke: green; } sovrascrive gli attributi semplici fill/stroke, ma è a sua volta sovrascritta da un style inline.

Esempio dell'elemento SVG <polygon> con quattro lati:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Provalo tu stesso »

Aggiungere ulteriori coppie di coordinate aggiunge semplicemente altri angoli. I quattro punti sopra producono un quadrilatero; puoi elencare tanti punti quanti ne richiede la forma.

Costruire un poligono regolare

Un poligono regolare (triangolo equilatero, quadrato, pentagono, esagono, ecc.) ha tutti i lati e gli angoli uguali. Non esiste un attributo dedicato — devi posizionare gli angoli su un cerchio manualmente. Per n lati su un cerchio di raggio r centrato in (cx, cy), ogni angolo i si trova in:

x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)

In pratica i punti vengono solitamente precalcolati (a mano o con un piccolo script) e inseriti nell'attributo points. Gli esempi di triangolo e quadrilatero sopra usano coordinate scelte manualmente, quindi i loro lati non sono esattamente uguali.

Esempio dell'elemento SVG <polygon> per creare una stella:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="230" >
      <polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Provalo tu stesso »

Comprendere fill-rule (perché il centro della stella è vuoto)

Quando il contorno di una forma si incrocia su se stesso — come accade con una stella a cinque punte — il browser deve decidere quali regioni chiuse sono considerate "interne" e devono essere riempite. L'attributo di presentazione fill-rule controlla questa decisione. Accetta uno dei due valori seguenti:

  • nonzero (il valore predefinito) — usato nell'esempio della stella sopra. Per qualsiasi regione, il browser traccia un raggio immaginario verso l'esterno e conta come il percorso lo attraversa: +1 per ogni attraversamento in una direzione, -1 per l'altra. Se il totale è diverso da zero, la regione viene riempita. Per una stella tracciata con un singolo tratto continuo, il pentagono interno ottiene un conteggio non nullo, quindi viene riempito — la stella appare solida.
  • evenodd — conta gli attraversamenti indipendentemente dalla direzione. Se il conteggio è dispari la regione viene riempita; se pari, rimane trasparente. Con questa regola il pentagono interno della stella ottiene un conteggio pari e rimane vuoto.

Quindi cambiare solo fill-rule:nonzero in fill-rule:evenodd nell'esempio della stella lascia il centro trasparente — un metodo comune per creare il contorno di una stella.

Attributi

AttributoDescrizione
pointsL'elenco dei punti (coppie di coordinate assolute x,y) che definiscono gli angoli del poligono.
fill-ruleModalità di riempimento delle regioni sovrapposte: nonzero (predefinito) o evenodd.
pathLengthLa lunghezza totale che il percorso deve avere, in unità utente. Impostandolo si consente ad attributi come stroke-dasharray di usare valori relativi a questa lunghezza invece della lunghezza geometrica reale — utile quando non si vuole misurare la forma esattamente.

Come tutte le forme SVG, <polygon> accetta anche gli attributi di presentazione fill, stroke e stroke-width, oltre agli Attributi Globali e agli Attributi di Evento.

Pagine correlate

  • SVG Polyline — la controparte a percorso aperto di <polygon>.
  • SVG Path — <path>, l'elemento più flessibile per disegnare curve e forme complesse.
  • Riferimento SVG — l'elenco completo degli elementi e degli attributi SVG.

Esercitazione

Pratica
Quali affermazioni sull'elemento SVG <polygon> sono vere?
Quali affermazioni sull'elemento SVG <polygon> sono vere?
Was this page helpful?