SVG <polygon>

SVG Polígono - <polygon>

<polygon> El elemento se utiliza para crear gráficos que contienen al menos tres lados.

El polígono está compuesto por líneas rectas y tiene una forma "cerrada" (todas las líneas se conectan).

La palabra Polygon proviene del griego. "Poly" significa "muchos", "gon" significa "ángulo".

Ejemplo 1

El siguiente ejemplo crea un polígono con tres lados:

Este es el código SVG:

<svg altura="210" ancho="500">
  <polygon points="200,10 250,190 160,210" style="relleno:lima;trazo:morado;ancho_trazo:1" />
</svg>

Prueba personal

Explicación del código:

• La propiedad points define las coordenadas x e y de cada esquina del polígono

Ejemplo 2

El siguiente ejemplo crea un polígono con cuatro lados:

Este es el código SVG:

<svg altura="250" ancho="500">
 <polygon points="220,10 300,210 170,250 123,234" style="relleno:lima;trazo:morado;ancho_trazo:1" />
</svg>

Prueba personal

Ejemplo 3

Usando <polygon> El elemento crea una estrella:

Este es el código SVG:

<svg altura="210" ancho="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="relleno:lima;trazo:morado;ancho_trazo:5;regla_relleno:nonzero;" />
</svg>

Prueba personal

Ejemplo 4

Cambie la propiedad fill-rule a "evenodd"：

Este es el código SVG:

<svg altura="210" ancho="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="relleno:lima;trazo:morado;ancho_trazo:5;regla_relleno:evenodd;" />
</svg>

Prueba personal