Dibujar líneas con path

facebook-svg gplus-svg twitter-svg

Para dibujar una línea con <path> podemos utilizar una de estas instrucciones de control ( commands )

M(absoluto)
m(relativo)
moveto
Mueve el "lapiz" en este punto (x,y). No dibuja ningúna línea
Mx,y
L(absoluto)
l(relativo)
lineto
Dibuja una línea desde el punto actual (x,y) hasta este punto (x1,y1)
Lx1,y1
H(absoluto)
h(relativo)
horizontal lineto
Dibuja una línea horizontal desde el punto actual (x,y) hasta un punto (x1,y)
Hx1
V(absoluto)
v(relativo)
vertical lineto
Dibuja una línea vertical desde el punto actual (x,y) hasta un punto (x,y1)
Vy1
Z
z
closepath
Cierra el trazado
Z

Veamos un ejemplo:



 

En el ejemplo anterior hemos empezado a dibujar en el punto x=50,y=60. Para mover el "lápiz" a este punto hemos utilizado m50,60.

d="m50,60 l140,-25 v125 h-160 z"

Aunque m es una instrucción de control relativa, como que se trata del primer punto del trazado, podemos utilizar tanto m como M.
A continuación queremos dibujar una línea, y para esto podemos utilizar L o l como instrucción de control. En el ejemplo anterior hemos trazado una primera línea desde x=50,y=60 ( punto definido anteriormente con m ) hasta x +=140,y -=250. Utilizamos coordenadas relativas, y por tanto :

d="m50,60 l140,-25 v125 h-160 z"

En SVG podemos dibujar líneas verticales especificando solo el valor del parámetro y, ya que el x queda igual. Para dibujar líneas verticales podemos utilizar una de estas instrucciones  de control: V ( si utilizamos coordenadas absolutas ) o v ( si utilizamos coordenadas relativas ).

d="m50,60 l140,-25 v125 h-160 z"

De la misma manera podemos dibujar líneas horizontales especificando solo el valor del parámetro x, ya que el y queda igual. Para dibujar líneas horizontales podemos utilizar una de estas instrucciones  de control: H o h

d="m50,60 l140,-25 v125 h-160 z"

Para acabar cerramos el trazado utilizando closepath ( Z o z )

d="m50,60 l140,-25 v125 h-160 z"