Dibujar líneas con path
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"