LINEAS SVG EN HTML5

Crear líneas rectas con código HTML en formato SVG es muy sencillo, basta con definir el punto inicial y el punto final de la línea, a ello le sumamos las propiedades para determinar aspectos como color, ancho y entre otras, veamos de primera mano, cómo es que se hace.

Etiqueta <line> HTML

Para crear una línea recta dentro de SVG crearemos la etiqueta <rect/> dentro del elemento <svg>, de la siguiente manera:

<svg>
  <line/>
</svg>

Posición del segmento de recta

Un segmento de recta dentro de SVG está limitado por el punto inicial y su punto final, su posición estará determinada por esos mismos puntos y en el código lo expresaremos como propiedades de <line> y son las siguientes:

  • x1.- posición inicial en eje X.
  • y1.- posición inicial en eje Y.
  • x2.- posición final en eje X.
  • y2.- posición fina en eje Y.

Ahora podemos determinar el punto inicial y final de una linea en HTML

  • El punto inicial será las coordenadas SVG: (x1,y1)
  • El punto final de la linea SVG corresponde a: (x2,y2)

Recordemos que el punto de origen de coordenadas (0,0) será la esquina superior izquierda del lienzo SVG.

Ejemplo de linea SVG

<svg>
  <line x1="30" y1="50" x2="100" y2="150"/>
</svg>

El resultado de este código aun no es visible en la ventana del navegador, para ello al menos tenemos que dotar de algún aspecto, ya sea color, ancho, etc.

Propiedades para line HTML

Veamos algunas propiedades que serán empleadas en los ejemplos

  • stroke.- define el color de linea.
  • stroke-width.- define el ancho de linea.
  • stroke-linecap.- estilo de terminación de borde.
Te recomendamos leer:  Categorías de contenidos HTML5

Ejemplos de lineas en HTML

Ejemplo1.- Crearemos un lienzo SVG con dimensiones de 400x300px, además le pondremos un borde de 1px solido y color negro, solo para ver como se toman las distancias de punto inicial y final, veamos.

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

<line x1="80" y1="50" x2="250" y2="200" stroke-width="10" stroke="black" />

</svg>

Resultado.- las marcas rojas son solo para mostrar las medidas, no aparecen en el resultado del navegador (aclaro, no está demás 🙂

Donde:

  • Punto inicial (x1,y1): (80,50)
  • Punto final (x2,y2): (250,200)

Ejemplo 2.- en este ejemplo veremos un par de lineas con diferentes propiedades en el mimos lienzo SVG…

<svg width="400" height="300">
  <line x1="80" y1="50" x2="250" y2="200" stroke-width="5" stroke="red" />
  <line x1="80" y1="200" x2="250" y2="60" stroke-width="10" stroke="blue" />
</svg>

Resultado

Ahora que ya sabes como hacer lineas en SVG, prueba a crear varias en distintas posiciones, en las siguiente lección aprenderemos a crear polilíneas, así que vamos por ello.

Lecciones de HTML5
Rate this post

Deja un comentario