POLÍGONOS SVG EN HTML5

Anterior
Avanzar

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 <polygon> de HTML5 nos permite crear una figura cerrada mediante varios lados y vértices en conjunto, simplemente creamos la etiqueta <polygon> dentro del elemento <SVG> 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>

Resultado:

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 con HTML5 en SVG

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>

Resultado:

Te recomendamos leer:  Círculos svg en html5

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>

Resultado:

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>

Resultado:

En esta lección 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.

Lecciones de HTML5
Anterior
Avanzar
5 2 votos
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5