Los últimos tutoriales de desarrollo web
 

SVG <Polígono>


SVG Polígono - <polígono>

La <polygon> elemento se utiliza para crear un gráfico que contiene al menos tres lados.

Los polígonos se hacen de líneas rectas, y la forma es "closed" (todas las líneas conectan hacia arriba).

Polígono viene del griego. "Poly" significa "many" y "gon" medios "angle" .


Ejemplo 1

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

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Inténtalo tú mismo "

Code explanation:

  • El points atributo define la coordenadas X e Y para cada vértice del polígono

Ejemplo 2

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

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Inténtalo tú mismo "

Ejemplo 3

Utilice el <polygon> elemento para crear una estrella:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Inténtalo tú mismo "

Ejemplo 4

Cambie la propiedad de relleno en reglas para "evenodd" :

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Inténtalo tú mismo "