Ahora con HTML5 es posible crear formas de polígonos en SVG, figuras geométricas que encierran una región superficial como puede ser: triángulos, cuadriláteros, pentágonos, hexágonos, etc. En esta lección aprenderemos a cómo crearlos.
Etiqueta <polygon>
La etiqueta de HTML5 nos permite crear una figura cerrada mediante varios lados y vértices en conjunto, simplemente creamos la etiqueta dentro del elemento y añadimos las propiedades necesarias para formar la figura deseada.
<svg> <polygon/> </svg>
Vértices
Los vértices visualmente se presentan como puntos de inflexión y podremos definir cada punto mediante un par ordenado (X,Y), de manera similar como se hacia con las polilineas con el atributo points.
Propiedad points
La propiedad points, como veníamos mencionado sirve para establecer los puntos de inflexión o vértices, ello lo haremos mediante pare ordenados separados por comas. Veamos el ejemplo de código.
<svg width="400px" height="300"> <polygon points="175 40, 270 108, 233 216, 117 216, 81 108" /> </svg>
Veremos:
En el caso del polígono el punto inicial y final se unen mediante una linea para formar una figura cerrada, además el color de relleno por defecto es el negro.
Aspecto
Podemos controlar el aspecto del polígono empleando propiedades como:
- fill.- para establecer color de relleno.
- stroke.- para indicar el color de borde.
- stroke-width.- para indicar el ancho de borde.
Ejercicios de polígonos
1.- Crear un triángulo con fondo naranja y borde solido de 5px color negro.
<svg width="400px" height="300px"> <polygon fill="orange" stroke="black" stroke-width="5px" points="80 230, 180 30, 280 230" /> </svg>
Veremos:
2.- Crear un hexágono con color de relleno amarillo y borde azul de 3px.
<svg width="400px" height="300px"> <polygon fill="yellow" stroke="blue" stroke-width="4px" points="100 90, 187 42, 272 90, 272 184, 187 233, 100 184" /> </svg>
Veremos:
3.- El tercer ejercicio de polígonos SVG, consiste en crear una estrella de 5 puntas, con el aspecto que desees.
<svg width="400px" height="300px"> <polygon fill="orange" stroke="green" stroke-width="4px" points="170 50, 193 127, 275 127, 210 174, 235 249, 168 205, 100 250, 127 174, 60 130, 140 127" /> </svg>
Veremos:
Hemos aprendido a crear polígonos en SVG, son bastante similares a las polilineas, sin embargo no debes confundir, las polilineas tienen un punto inicial y final, son abiertas y no encierran un área; en cambio los polígonos forman regiones cerradas.