SVG <polígono>
SVG Polígono - <polígono>
El elemento <polygon> se usa para crear un gráfico que contiene al menos tres lados.
Los polígonos están hechos de líneas rectas y la forma es "cerrada" (todas las líneas se conectan).
Polígono viene del griego. "Poly" significa "muchos" y "gon" significa "ángulo".
Ejemplo 1
El siguiente ejemplo crea un polígono con tres lados:
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>
Explicación del código:
- El atributo de puntos define las coordenadas x e y para cada esquina del polígono
Ejemplo 2
El siguiente ejemplo crea un polígono con cuatro lados:
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>
Ejemplo 3
Usa el elemento <polygon> para crear una estrella:
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>
Ejemplo 4
Cambie la propiedad de regla de relleno a "evenodd":
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>