POLÍGONOS SVG EN HTML5

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:  LINEAS 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
5 3 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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML