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.
Ir a contenido:
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 línea 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 línea.
- stroke-width.- define el ancho de línea.
- stroke-linecap.- estilo de terminación de borde.
Ejemplos de lineas en HTML
Ejemplo1.- Crearemos un lienzo SVG con dimensiones de 400x300px, además le pondremos un borde de 1px sólido y color negro, solo para ver cómo 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 cómo hacer líneas en SVG, prueba a crear varias en distintas posiciones, en las siguiente lección aprenderemos a crear polilíneas, así que vamos por ello.
[popup_anything id=»4434″]