LINEAS SVG EN HTML5

Anterior
Avanzar

Crear lineas rectas con código HTML en formato SVG es muy sencillo, basta con definir el punto inicial y el punto final de la linea, 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 linea 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 esta 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:  Introducción a curso 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
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