Polilineas en html5

Anterior
Avanzar

Crear polilineas con código HTML ahora es posible gracias al elemento SVG, es bastante sencillo, solo necesitaremos crear el elemento polilinea dentro de SVG e indicar los puntos de inflexión de la polilinea, a ello le sumamos el aspecto que debe tener y listo. Ahora que ya tienes idea, pues entonces veamos con ejemplos concretos.

A diferencia de una linea, una polilinea es una cadena de lineas unidas que forman una sola figura denominada polilinea.

Etiqueta <polyline>

Para empezar a crear una polilinea simplemente colocamos la etiqueta <polyline/> dentro del elemento SVG, de la siguiente manera:

<svg>
  <polyline/>
</svg>

Puntos de inflexión

La forma más simple de una polilinea es una figura que visualmente esta formada por varios segmentos de linea unidas entre si para formar un único elemento. Para crear estos puntos de inflexión simplemente declaramos la propiedad pointsy en su valor colocamos los pares ordenados X y Y separados por espacio, los pares ordenados serán separados por comas (,). veamos un ejemplo.

<svg>
  <polyline points="100 100, 150 150, 200 100"/>
</svg>

Esto por si solo no dibujará una figura visible en el navegador, para ello tendremos que establecer alguna propiedad que controle el aspecto de dicha polilinea, ya sea el ancho, color, estilo, etc.

Propiedades para polyline

Entre las propiedades que estaremos empleando en los ejemplos tenemos:

  • stroke.- al tratarse de solo lineas, define el color de linea.
  • stroke-width.- ancho de linea.
  • fill.- color de relleno, para evitar color de relleno empleamos el valor none.

Ejemplos de polilinea en SVG con HTML

Mediante varios ejemplos, aprenderemos y comprobaremos cómo es que se hace y aplica el elemento polilyne y sus respectivas propiedades.

Te recomendamos leer:  SVG EN HTML5

Ejemplo 1.

Ahora crearemos una polilinea en SVG que pueda ser visualizada en en la pantalla del navegador; el primer ejemplo se trata de una polilinea de color rojo que parte desde el punto (50,50) y pasa por los puntos (150,1500), (80,200) y finaliza en (250,300) del espacio SVG.

<svg style="border: 1px solid black;" width="400px" height="300">
  <polyline fill="none" stroke="red" stroke-width="5" 
points="50 50, 150 150, 80 200, 250 300"/>

</svg>

¿Cómo y por dónde se toman las distancias, la posición de los puntos y en general de la polilinea? Bueno al principio puede sonar a difícil, y para evitar confusión el resultado estará llena de marcas adicionales con distancias y puntos, de tal manera que seas capaz de distinguir y ver cómo funciona.

Resultado

Nuestro lienzo SVG tiene dimensiones de 400x300px, para diferenciar le pusimos borde de 1px, solido y color negro. Hemos definido cuatro puntos por donde pasa la polilinea y estan claramente identificados para que no te confundas.

Ejemplo 2.

En este ejemplo crearemos un par de polilineas con sus respectivas características, pero esta vez sin marcar nada en el resultado, veamos.

<svg style="border: 1px solid black;" width="400px" height="300">

  <polyline fill="green" stroke="red" stroke-width="5" 
points="20 30, 100 150, 30 200"/>


<polyline fill="blue" stroke="orange" stroke-width="5" 
points="100 30, 150 100, 200 30, 300 150"/>

<polyline fill="none" stroke="green" stroke-width="5" 
points="150 150, 250 150, 250 250, 150 250, 150 200, 200 200"/>
</svg>

Resultado:

Cuando se establece la propiedad fill, podemos colocar un color de relleno y básicamente es la región que encierra la polilinea, uniendo el punto inicial y final por defecto. Si no se se establece fill, entonces el color de relleno predeterminado es negro.

Te recomendamos leer:  Declaración de documento HTML5
Lecciones de HTML5
Anterior
Avanzar
0 0 votar
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