w3.unpo<code>todo

Trazados 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.