23-Polilíneas SVG.

Crear polilíneas con código HTML ahora es posible gracias al elemento SVG, es bastante sencillo, solo necesitaremos crear el elemento polilínea dentro de SVG e indicar los puntos de inflexión de la polilínea, 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 línea, una polilínea es una cadena de líneas unidas que forman una sola figura denominada polilínea.

Etiqueta <polyline>

Para empezar a crear una polilínea simplemente colocamos la etiqueta dentro del elemento SVG, de la siguiente manera:

<svg>
  <polyline/>
</svg>

Puntos de inflexión

La forma más simple de una polilínea es una figura que visualmente está formada por varios segmentos de línea unidas entre sí 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 sí solo no dibujará una figura visible en el navegador, para ello tendremos que establecer alguna propiedad que controle el aspecto de dicha polilínea, 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 líneas, define el color de línea.
stroke-width.- ancho de línea.
fill.- color de relleno, para evitar color de relleno empleamos el valor none.

Ejemplos de polilinea en SVG

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

Ejemplo 1.

Ahora crearemos una polilínea en SVG que pueda ser visualizada en la pantalla del navegador; el primer ejemplo se trata de una polilínea 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 polilínea? 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.

Veremos:

Nuestro lienzo SVG tiene dimensiones de 400x300px, para diferenciar le pusimos borde de 1px, sólido y color negro. Hemos definido cuatro puntos por donde pasa la polilínea y están claramente identificados para que no te confundas.

Ejemplo 2.

En este ejemplo crearemos un par de polilíneas 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>