Hasta el momento, en los artículos anteriores, hemos creado trayectos utilizando coordenadas absolutas, es decir, indicando coordenadas basadas en el viewbox definido del SVG.
Sin embargo, también es posible indicar coordenadas relativas, en base a la posición actual, en lugar de la posición absoluta del viewBox. Son un poco más difíciles de gestionar, pero son mucho más reutilizables y potentes.
Operaciones
Observa la siguiente tabla resumen de las operaciones explicadas en los artículos anteriores. En la primera columna está la letra a escribir para indicar una coordenada absoluta, mientras que la segunda columna está la letra a escribir para indicar una coordenada relativa. Básicamente, es utilizar la misma letra, pero en minúsculas:
| Absoluta | Relativa | Significado | Descripción |
|---|---|---|---|
M | m | MoveTo | Coloca el puntero en una posición. |
L | l | LineTo | Traza una línea hasta una posición. |
H | h | Horizontal LineTo | Idem, pero trazando una línea horizontal. |
V | v | Vertical LineTo | Idem, pero trazando una línea vertical. |
C | c | Cubic Bézier CurveTo | Curva Bézier con puntos de control (a,b) y (c,d). |
S | s | Smooth Cubic Bézier CurveTo | Idem, pero suavizada (sin puntos de control). |
Q | q | Quadratic Bézier CurveTo | Curva Bézier Cuadrática con punto de control (a,b) |
T | t | Smooth Quadratic Bézier CurveTo | Curva Bézier Cuadrática suavizada (sin punto de control) |
A | a | Elliptical Arc Curve | Curva de arco elíptico |
Z | z | ClosePath | Cerrar el trayecto |
Como ves, SVG permite indicar también los valores m, l, h, v, c, s, q, t, a y z, con la diferencia de que al utilizar letras mayúsculas los valores utilizados son absolutos. Sin embargo, si utilizamos letras minúsculas los valores utilizados son relativos.
Es posible crear trayectos donde mezclemos operaciones de ambos grupos, absolutos y relativos. Son compatibles y pueden mezclarse.
Coordenadas absolutas
Para ejemplificar esto, hagamos un ejemplo de base para entenderlo. Observa el siguiente ejemplo donde dibujamos lo siguiente:
- 1️⃣ Creamos un elemento de
50x50(fíjate en el viewBox) - 2️⃣ El trayecto comienza en el punto
(5,5) - 3️⃣ Trazamos una línea hasta el punto
(45,45) - 4️⃣ Trazamos otra línea hasta el punto
(45,5)
<svg viewBox="0 0 50 50" height="300">
<path d="M5,5 L45,45 L45,5" stroke="black" fill="none" />
</svg>
Todo esto es realizado con coordenadas absolutas, ya que están en mayúsculas. Veamos otro ejemplo, donde vamos a hacer lo mismo, pero utilizando coordenadas relativas.
Coordenadas relativas
Ejemplifiquemos ahora el mismo ejemplo anterior, pero utilizando coordenadas relativas. Haremos lo siguiente:
- 1️⃣ Creamos un elemento de
50x50(fíjate en el viewBox) - 2️⃣ El trayecto comienza en el punto
(0,0)por defecto - 3️⃣ Nos movemos
5unidades a la derecha, y5unidades abajo. - 4️⃣ Trazamos una línea
40unidades a la derecha y40unidades hacia abajo, hasta llegar al punto(45,45). - 5️⃣ Trazamos otra línea con
-40unidades, o sea,40unidades hacia arriba, hasta llegar al punto(45,5).
<svg viewBox="0 0 50 50" height="300">
<path d="m5,5 l40,40 l0,-40" stroke="black" fill="none" />
</svg>
Como puedes ver, el resultado es el mismo, pero aunque las unidades absolutas pueden parecer más simples, dependiendo de lo que estemos haciendo puede ser más interesante utilizar las unidades relativas, con las que trabajamos respecto a la posición anterior.
En el caso de utilizar la operación con letra
zoZpara cerrar un trayecto, no tienen ninguna diferencia una de la otra. Se pueden usar indistintamente.
