El elemento en SVG es el elemento de dibujo definitivo. ¡Puede dibujar cualquier cosa! Escuché que bajo el capó todos los demás elementos de dibujo finalmente usan la ruta de todos modos. El elemento de ruta toma un solo atributo para describir lo que dibuja: el d atributo. El valor que tiene es una mini sintaxis para sí mismo. Puede parecer bastante indescifrable. Es una tonelada de números y letras aplastados en una cadena larga. Como cualquier computadora, hay una razón para la rima. No soy un experto aquí, pero pensé que sería divertido profundizar.
Aquí hay un ejemplo de una ruta de complejidad media, diría:
<path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>Podríamos reformatearlo para comenzar a entenderlo (código aún válido):
<path d="
M 213.1,6.7
c -32.4-14.4-73.7,0-88.1,30.6
C 110.6,4.9,67.5-9.5,36.9,6.7
C 2.8,22.9-13.4,62.4,13.5,110.9
C 33.3,145.1,67.5,170.3,125,217
c 59.3-46.7,93.5-71.9,111.5-106.1
C 263.4,64.2,247.2,22.9,213.1,6.7
z" />Las letras son comandos. Los números son pasar valores a esos comandos. Todas las comas son opcionales (pueden ser espacios).
Por ejemplo, ese primer comando es M. M dice, en un sentido metafórico, levante el bolígrafo y muévalo al lugar exacto 213.1, 6.7. No dibuje nada todavía, simplemente mueva la ubicación del lápiz. De modo que si otros comandos dibujan, ahora comienza en esta ubicación.
M es solo uno de los muchos comandos de ruta. Hay 18 de ellos según mi recuento.
Muchos (pero no todos) vienen en un par. Hay una versión en MAYÚSCULAS y en minúsculas. La versión MAYÚSCULAS es la absoluto versión y la minúscula es la relativo versión. Sigamos usando M como ejemplo:
M 100,100significa “Coge el bolígrafo y muévelo a las coordenadas exactas 100,100”m 100,100significa “Mueva el Pen 100 hacia abajo y el 100 directamente desde donde se encuentre”.
Muchos comandos tienen la misma configuración. La versión en minúsculas tiene en cuenta dónde se encuentra actualmente el “bolígrafo”.
Veamos dos comandos absolutos:
comandos Coge el bolígrafo y muévelo a 50,50 Baja el bolígrafo y dibuja una línea hasta 100,100
Seguido de un comando relativo:
comandos Desde la posición actual, mover hacia la derecha 25
Como el M y m comandos L y l tome dos números: coordenadas absolutas o relativas. Hay otros cuatro comandos que son esencialmente versiones más simples de los comandos de línea. También dibujan líneas, pero solo toman un valor: horizontal o vertical. Cuando usamos l 25,0 podríamos haber usado h 25 lo que significa “desde donde se encuentra actualmente el bolígrafo, dibuja 25 a la derecha. Más sucinto, supongo. Es hermano mayor H, como podríamos adivinar, significa dibujar a la coordenada horizontal exacta 25. V y v muévete verticalmente absoluta y relativamente como seguramente adivinarías.
Vea esta demostración de Chris Nager en la que dibuja una cruz en una cantidad extremadamente pequeña de código, gracias al dibujo de coordenadas relativas:
¿Ves el último personaje que Chris usó allí? Z. Z (o z, no importa) “cierra” el camino. Como cualquier otro comando, es opcional. Es una manera fácil y barata de dibujar una línea recta directamente hasta el último lugar donde se colocó el “bolígrafo” (probablemente el último M o m mando). Le ahorra tener que repetir esa primera ubicación y usar un comando de línea para volver allí.
comandos Dibuja una línea recta de regreso al inicio
Veamos los comandos que hemos cubierto hasta ahora.
| METRO x, y | Mover a las coordenadas absolutas x, y |
| metro x, y | Mover hacia la derecha xy hacia abajo y (o hacia la izquierda y hacia arriba si hay valores negativos) |
| L x, y | Dibuja una línea recta a las coordenadas absolutas x, y |
| l x, y | Dibuja una línea recta hacia un punto que esté relativamente a la derecha xy hacia abajo y (o hacia la izquierda y hacia arriba si hay valores negativos) |
| H X | Dibuja una línea horizontalmente a la coordenada exacta x |
| h X | Dibuja una línea horizontalmente con relación a la derecha x (oa la izquierda si es un valor negativo) |
| V y | Dibuja una línea verticalmente a la coordenada exacta y |
| v y | Dibuja una línea verticalmente relativamente hacia abajo y (o hacia arriba si es un valor negativo) |
| Z (o z) | Dibuja una línea recta de regreso al inicio del camino. |
Hasta ahora solo hemos visto líneas rectas. Path es un elemento y una sintaxis perfectamente aceptables para eso, aunque se podría argumentar que elementos como podría tener una sintaxis aún más fácil para formas de línea recta, aunque un poco más limitada.
¡La superpotencia del camino son las curvas! Hay bastantes tipos diferentes.
Recuerde que el primer fragmento de código de ejemplo que vimos usó muchos C y c comandos. Esas son “curvas de Bezier” y requieren más datos para hacer lo suyo.
El comando C toma tres puntos. Los dos primeros puntos definen la ubicación de dos controles de curva Bézier. Quizás ese concepto sea familiar de una herramienta como la herramienta Pluma en Adobe Illustrator:
El último de los tres puntos es el final de la curva. El punto donde debería terminar la curva. Aquí hay una ilustración:
comandos Punto Bezier # 1 Punto Bezier # 2 Punto final
La minúscula c El comando es exactamente el mismo, excepto que los tres puntos usan valores relativos.
El S (o s) es amigo de los comandos C en el sentido de que solo requiere dos puntos porque asume que el primer punto Bézier es un reflejo del último punto Bézier del último comando S o C.
comandos ¡ASUMIDO! Bezier PointFinal Point
El Q El comando es uno de los más fáciles ya que solo requiere dos puntos. El punto Bézier que quiere es un punto de control de curva “cuadrática”. Es como si tanto el punto inicial como el final compartieran un solo punto para el final de su palanca de control.
Bien podríamos cubrir T al mismo tiempo. Son amigos con Q al igual que S Es con C. Cuando T viene después de una Q, se supone que el punto de control es un reflejo del anterior, por lo que solo necesita proporcionar el punto final.
comandos Bezier PointFinal PointASUMED! Final Point
El A El comando es probablemente el más complicado. O los que requieren la mayor cantidad de datos, al menos. Le da información que define el ancho y la altura de un óvalo y cómo se gira ese óvalo, junto con el punto final. Luego, un poco más de información sobre qué camino a lo largo de ese óvalo espera que tome el camino. De MDN:
Hay dos posibles elipses para que la ruta viaje alrededor y dos posibles caminos diferentes en ambas elipses, dando cuatro caminos posibles. El primer argumento es la bandera de arco grande. Simplemente determina si el arco debe ser mayor o menor de 180 grados; al final, esta bandera determina en qué dirección viajará el arco alrededor de un círculo dado. El segundo argumento es la bandera de barrido. Determina si el arco debe comenzar a moverse en ángulos negativos o positivos, lo que básicamente elige cuál de los dos círculos recorrerá.
El gráfico de Joni Trythall que explica A de su artículo sobre rutas SVG es bastante claro:
Aquí hay explicaciones escritas de esos comandos de curva.
| C cX1, cY1 cX2, cY2 eX, eY | Dibuja una curva Bézier basada en dos puntos de control bezier y terminan en coordenadas especificadas |
| C | Lo mismo con todos los valores relativos |
| S cX2, cY2 eX, eY | Básicamente, un comando C que asume que el primer punto de control bezier es un reflejo del último punto bezier utilizado en el comando S o C anterior. |
| s | Lo mismo con todos los valores relativos |
| Q cX, cY eX, eY | Dibuja una curva Bézier basada en único punto de control bezier y finaliza en coordenadas especificadas |
| q | Lo mismo con todos los valores relativos |
| T eX, eY | Básicamente, un comando Q que asume que el primer punto de control bezier es un reflejo del último punto bezier utilizado en el comando Q o T anterior. |
| t | Lo mismo con todos los valores relativos |
| A rX, rY rotación, arco, barrido, eX, eY | Dibuja un arco que se base en la curva que hace un óvalo. Primero defina el ancho y la altura del óvalo. Luego la rotación del óvalo. Junto con el punto final, esto hace dos posibles óvalos. Entonces, el arco y el barrido son 0 o 1 y determinan qué óvalo y qué camino tomará. |
| a | Lo mismo con los valores relativos para eX, eY |
¿Quieres ver un montón de ejemplos? OK:
Si está buscando en un navegador basado en Blink recientemente lanzado y tiene un mouse, ¡verá algunas animaciones flotantes! Resulta que ahora puedes establecer datos de ruta directamente en CSS. Por ejemplo…
<svg viewBox="0 0 10 10">
<path d="M2,5 C2,8 8,8 8,5" />
</svg>svg:hover path {
transition: d 0.2s;
d: path("M2,5 C2,2 8,2 8,5");
}¡Este visualizador de rutas SVG es tremendamente genial!
¿Quieres saber más sobre SVG? Es realmente genial, lo prometo. Escribí un libro completo sobre eso. Se llama Practical SVG y no es muy caro.