Trazados SVG

facebook-svg gplus-svg twitter-svg

El elemento <path> se utiliza en SVG para dibujar formas complejas, una combinación de líneas, arcos y curvas Bézier. Para entender como funciona el elemento <path> veamos un ejemplo:



   


   

Primero miremos detenidamente el trazado verde.
La imagen está compuesta por una línea, seguida de un arco, seguida de nuevo de una línea.  Lo que define este trazado es el atributo d.

 
<path d="M50,130 L90,105 A40,45 -30 1,1 150 80 L200,55" 
       style="stroke:#007700; 
       stroke-width:3; 
       fill:none;">
</path>

Exactamente como el atributo points de <polyline> y de <polygon>, el atributo d contiene todas las instrucciones necesarias para dibujar un trazado complejo.
A diferencia de <polyline> y <polygon> el elemento <path> nos permite combinar no solo líneas sino también toda clase de arcos y curvas . Para esto el atributo d utiliza unas instrucciones de control ( commands ) que identifican el tipo de trazado que queremos dibujar.

Analicemos el valor del atributo d del ejemplo anterior:
M – llamado también "moveto" mueve la punta del lápiz en un punto cuyas coordenadas son x=50 y=130.

d="M50,130 L90,105 A40,45 -30 1,1 150 80 L200,55"

L – llamado también "lineto" dibuja una línea desde el punto actual ( x=50 y=130 ) hasta el punto cuyas coordenadas son x=90 y=105

d="M50,130 L90,105 A40,45 -30 1,1 150 80 L200,55"

A – llamado también "elliptical arc" dibuja un arco ( de circulo o elipse )

d="M50,130 L90,105 A40,45 -30 1,1 150 80 L200,55"

Finalmente el trazado acaba con otra línea.

d="M50,130 L90,105 A40,45 -30 1,1 150 80 L200,55"

Miremos ahora el segundo trazado, el rojo.
Excepto el color, los dos trazados son idénticos, pero los valores del atributo d son muy distintos:

d="M50,130 L90,105 A40,45 -30 1,1 150 80  L200,55" (verde)
d="M50,130 l40,-25 a40,45 -30 1,1 60 -25 l50,-25"   (rojo)

De entrada los controladores del primer trazado ( el verde ) son en mayúscula. Esto quiere decir que las coordenadas son absolutas. O sea: la primera línea empieza en el punto cuyas coordenadas son x=50, y=130
y acaba en el punto cuyas coordenadas son x=90, y=105.
La mayoría de los controladores del segundo trazado son en minúscula. Esto quiere decir que las coordenadas son relativas a los valores anteriores. La primera línea de este trazado empieza también en el punto cuyas coordenadas son x=50, y=130 y acaba en el punto cuyas coordenadas son x = 50 + 40 = 90, y = 130 - 25 = 105.
En conclusión: d="M50,130 L90,105" es prácticamente igual a d="M50,130 l40,-25" solo lo calculamos de manera diferente.
De hecho es mucho más útil utilizar coordenadas relativas, ya que si queremos desplazar el trazado, lo único que tenemos que modificar son las coordenadas del primer punto.

Instrucciones de control ( commands ) disponibles para <path>:

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
C(absoluto) c(relativo) curveto
Dibuja una curva cúbica de Bézier desde el punto actual (x,y) hasta un punto (x3,y3).
x1,y1 x2,y2 son las coordenadas de los puntos de anclaje (control points) P1 y P2.
Cx1,y1 x2,y2 x3,y3
S(absoluto) s(relativo) smooth curveto
Dibuja una curva cúbica de Bézier desde el punto actual (x,y) hasta un punto (x2,y2).
El primer punto de anclaje es el reflejo del segundo punto de anclaje de la curva anterior; x1,y1 son las coordenadas del segundo punto de anclaje (control point) P1.
Sx1,y1 x2,y2
Q(absoluto) q(relativo) quadratic Bézier curve
Dibuja una curva cuadrática de Bézier desde el punto actual (x,y) hasta un punto (x2,y2); x1,y1 son las coordenadas del punto de anclaje (control point) P1.
Qx1,y1 x2,y2
T(absoluto) t(relativo) smooth quadratic Bézier curveto
Dibuja una curva cuadrática de Bézier desde el punto actual (x,y) hasta un punto (x1,y1). El punto de anclaje (control point) es el reflejo del punto de anclaje de la curva anterior;
Tx1,y1
A(absoluto) a(relativo) elliptical arc
Dibuja un arco elíptico desde el punto actual hasta un punto (x1,y1);
rx y ry son los radios elipticos en la dirección x e y respectivamente.
x-axis-rotation indica la rotación de la élipse relativamente al sistema de coordinadas actuales.
large-arc-flag y sweep-flag ayudan al calcular como e arco esta dibujado
Arx,ry
x-axis-rotation
large-arc-flag (0 o 1),
sweep-flag ( 1 = clockwise;
0 = anti-clockwise
),
x1,y1
Z
z
closepath
Cierra el trazado
Z