Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 30/10/2012

Path: Definición de trayectorias en SVG

Una cuestión que no se había tratado todavía es el manejo de trayectorias. Esto es útil si queremos realizar transformaciones o curvas complejas. El elemento que hace esto es path. Se pueden definir hasta 10 tipos de trayectorias, las cuales pasamos a describir ahora.

Los siguientes comandos están disponibles para los datos de la trayectoria:

Aquí os dejo un ejemplo de loque se puede llegar a realizar prácticamente sólo con path: Luna en SVG

Las propiedades configurables de path son:

  • stroke: Establece el color del borde.
  • stroke-width: Establece el tamaño del borde.
  • stroke-linecap define cómo empieza y termina el path de puntos. Sus valores pueden ser butt, round y square.
  • stroke-dasharray Es para establecer lineas de trazos. Es decir, cada punto se interpretará como línea o separación. Primero se generará una línea, luego una separación, después otra línea, y así sucesivamente
  • fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
  • d: Establece la trayectoria indicando, mediante los parámetros introducidos, si se dibuja o no y el qué. La siguiente lista describe los parámetros del atributo d:

ParámetrosDefinición
Mueve el cursor hasta el punto indicado (x,y). Si especificamos el parámetro en minúsculas el cursor se desplazará (x,y) puntos con respecto a la ubicación actual.
Dibuja una línea desde el punto actual hasta (x,y).
Línea horizontal hasta el punto actual hasta (x,y). Si especificamos el parámetro en minúsculas la x será relativa a la posición actual.
Línea vertical hasta el punto actual hasta (x,y). Si especificamos el parámetro en minúsculas la y será relativa a la posición actual.
Dibuja una curva cúbica de Bézier desde el punto actual (x,y). (x1,y1) y (x2,y2) son puntos el inicio y final de la curva de control, que controlan cómo se dobla. Si especificamos el parámetro en minúsculas las coordenadas se interpretan de forma relativa al punto actual.
Dibuja una curva cúbica suave de Bézier desde el punto actual (x,y). x2, y2 es el punto de control final. El punto de control de inicio se supone que es el mismo que el punto de control final de la curva anterior. Si especificamos el parámetro en minúsculas las coordenadas se interpretan de forma relativa al punto actual.
Dibuja una curva cuadrática de Bézier desde el punto actual (x,y). x1, y1 es el punto de control que controla cómo se dobla la curva. Si especificamos el parámetro en minúsculas las coordenadas se interpretan de forma relativa al punto actual.
Dibuja una curva cuadrática suave de Bézier desde el punto actual (x,y). El punto de control se supone que es el mismo que el último punto de control utilizado. Si especificamos el parámetro en minúsculas las coordenadas se interpretan de forma relativa al punto actual.
Dibuja un arco elíptico desde el punto actual hasta el punto (x, y). Rx y Ry son el radio de la elipse en la dirección x e y.
El parámetro x-axis-rotation determina la cantidad de arco se va a girar alrededor del eje x. Sólo parece tener un efecto cuando rx y ry tienen valores diferentes.
El parámetro large-arch-flag puede tomar los valores 0 o 1 aunque no siempre hace efecto.
El parámetro sweepflag determina la dirección para dibujar el arco.
Si especificamos el parámetro en minúsculas las coordenadas se interpretan de forma relativa al punto actual.
Cierra el camino, trazando una línea desde el punto actual hasta el primer punto que se estableció en path actual.

Con respecto a escribir los comados en mayúsculas o minúsculas, como se indica en la tabla, básicamente, la direferencia estriba en el posicionamiento. Si escribimos con letras mayúsculas significa una posición absoluta, mientras que en minúsculas significa una posición relativa.

El ejemplo de la izquierda define un path que comienza en la posición 75,0 con una línea en la posición 25,100 a continuación, a partir de ahí, una línea a 125,100 y, que finalmente cierra el camino de regreso hasta el punto 75,0:

El código es el siguiente:


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M75,0 L25,100 L125,100 Z" fill="red" />
</svg> 

A B C

Las curvas de Bézier se utilizan para modelar curvas suaves que se pueden ampliar de forma indefinida. Generalmente, el usuario selecciona dos puntos extremos y uno o dos puntos de control. Una curva de Bézier con un punto de control se llama una curva Bézier cuadrática y el tipo con dos puntos de control se llama cúbico.

En el ejemplo siguiente, se crea una curva Bézier cuadrática, donde A y C son los puntos inicial y final, B es el punto de control

Debido a la complejidad para crear las rutas o paths de dibujo es muy recomendable utilizar un editor de SVG para crear gráficos complejos como inkScape.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.