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:
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:
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:
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" :
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 "