Degradado SVG en un trazado: revisa el color en la curva
Compara un degradado de coordenadas SVG con bandas de color deliberadas en una cinta curva. Inspecciona el origen, prueba dos tamaños y valora el costo geométrico.
En esta página
Un linearGradient SVG normal no mide el avance a lo largo de un trazado curvo. Pinta según un vector de degradado en un sistema de coordenadas. Si una cinta vuelve sobre sí misma, dos puntos en la misma posición a lo largo de ese vector pueden recibir el mismo color aunque estén muy separados a lo largo de la cinta.
Para un diseño estático que necesite una progresión de color alrededor de una curva, puedes crear secciones de color separadas. Así controlas la secuencia, pero añades geometría y límites de color visibles. Nuestro ejemplo original compara un degradado horizontal con ocho bandas deliberadas en la misma ruta creada por nosotros. Ambos archivos contienen trazados y ninguna imagen incrustada.
Revisa dónde se repite el color
La especificación de servidores de pintura de SVG2 define los degradados lineales mediante un vector y sus paradas de color. Describe los degradados radiales mediante su propia geometría circular. Ninguna definición convierte un trazado arbitrario en un eje de color basado en la distancia recorrida.
Nuestra cinta empieza arriba a la izquierda, va a la derecha, gira alrededor de un semicírculo y vuelve abajo a la izquierda. Un degradado horizontal hace naranjas ambos extremos izquierdos y morada la curva derecha. Es un degradado de coordenadas válido; simplemente responde a una pregunta de diseño distinta de «cambiar de color desde el inicio de esta ruta hasta el final».
El tutorial de degradados de MDN explica el modelo de extremos y paradas. Añadir más paradas cambia esa secuencia de color basada en coordenadas. No hace que la pintura siga la curva.
Conserva un degradado normal como control
Guarda este archivo completo como coordinate.svg. El trazado usa un trazo de 24 unidades dentro de un viewBox de 200×160. Sus tramos rectos y el semicírculo derecho forman una línea central editable.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>Usamos gradientUnits="userSpaceOnUse" para hacer explícitos los extremos del degradado en el sistema de coordenadas de origen. Cambiar a coordenadas de cuadro delimitador cambiaría cómo se expresan esos extremos; no introduciría pintura basada en distancia del trazado. Consulta la referencia de gradientUnits y nuestra guía de coordenadas de degradado.
Toda la ruta es un elemento path. Conserva esta versión sencilla como maestro geométrico aunque decidas entregar un tratamiento de color más elaborado.
Crea una secuencia escalonada alrededor de la curva
Guarda lo siguiente como bands.svg. Divide el tramo recto superior en dos piezas, el semicírculo en cuatro arcos y el tramo recto de regreso en dos piezas. Los colores se asignan en el orden de la ruta, desde naranja en el inicio superior hasta morado en el extremo inferior.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
<path d="M30 30 H75" stroke="#e36b2c"/>
<path d="M75 30 H120" stroke="#d38d31"/>
<path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
<path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
<path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
<path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
<path d="M120 130 H75" stroke="#5265b2"/>
<path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>Son ocho bandas elegidas manualmente con segmentos de longitudes desiguales. No son un cálculo de incrementos de color uniformes por unidad de longitud del trazado ni crean sombreado continuo. Los extremos decimales redondeados de los arcos aproximan la ruta original; este ejemplo no afirma que los contornos sean idénticos píxel a píxel.
La referencia de path documenta el elemento y sus datos de trazado. Cada sección sigue siendo una línea central con trazo, no un relleno cerrado con el contorno convertido. Si un destino requiere formas cerradas, prepara e inspecciona esa geometría por separado en lugar de tratar estas piezas de trazo como contornos de corte.
Usamos stroke-linecap="butt" para que las piezas adyacentes no se extiendan más allá de sus extremos. Los extremos redondos en cada sección interna se superpondrían a los colores vecinos. Las transiciones de recta a arco también necesitan direcciones coincidentes; nuestra guía de uniones suaves cubre por separado la continuidad geométrica.
Compara dos tamaños y dos posiciones
Renderizamos ambos archivos originales en Chrome a 200×160 y 400×320 píxeles CSS. El navegador decodificó cada SVG y lo pintó en un canvas cuyas dimensiones internas coincidían con las dimensiones de prueba. La relación de píxeles del dispositivo del navegador era 2; estas muestras registradas proceden del búfer del canvas, no de contar píxeles de dispositivo en una captura.
En las coordenadas de origen (60,30) y (60,130), los puntos están en distintos tramos rectos de la ruta. Comparten la misma coordenada horizontal, así que el degradado horizontal les da el mismo color de muestra.
| Archivo | Muestra superior en x=60 | Muestra inferior en x=60 | Trazados | Imágenes incrustadas |
|---|---|---|---|---|
| Degradado de coordenadas | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Bandas creadas | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Maestro geométrico plano | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Las parejas de muestras fueron iguales en ambos tamaños probados, con alfa 255 en los interiores pintados. El área abierta en el origen (100,80) tenía alfa cero en los seis casos. Eso comprueba estos archivos creados en este navegador; no certifica todos los renderizadores ni todos los píxeles de los límites.
El renderizado por bandas mantiene cambios de color discretos visibles en ambos tamaños. Revisa las uniones al tamaño de entrega, sobre todo después de exportar o incrustar. Las piezas separadas pueden mostrar juntas por el suavizado, el redondeo o las ediciones posteriores. Aumentar el número de secciones puede reducir el tamaño de cada salto de color, pero también crea más trazados y más límites que mantener.
Elige el tratamiento antes de expandir el diseño
| Necesidad de diseño | Punto de partida útil | Qué esfuerzo de revisión requiere |
|---|---|---|
| El color sigue una dirección de la página | Un degradado de coordenadas | Posiciones de extremos y límites de origen |
| Progresión estática alrededor de esta ruta | Secciones de color deliberadas | Colores de secciones, uniones tangentes y juntas |
| Progresión suave a lo largo de una curva arbitraria | Una aproximación diseñada por separado u otro método de entrega | Muestreo, intersecciones, geometría editable y renderizado de destino |
Rotar un degradado lineal cambia su dirección. Repetirlo cambia cómo se extienden sus colores. Ninguna operación hace que gire continuamente con esta línea central que vuelve. Un degradado radial puede encajar en una composición circular, pero es su propia geometría de pintura, no una solución general de distancia de ruta.
Si ajustas la curva después, revisa las secciones juntas. Conserva un maestro plano para comparar la ruta prevista y guarda por separado la copia con tratamiento de color. Nuestra guía de trazados relativos puede ayudarte a leer o mover los comandos de trazado subyacentes.
Si tu diseño inicial es un PNG o JPG y necesitas contornos editables, convierte el origen con PerfectVector, inspecciona la forma y las áreas abiertas recuperadas y conserva un maestro SVG limpio. Elige o reconstruye el tratamiento de color después de revisar esa geometría. La vectorización no garantiza recuperar exactamente el sombreado continuo ni inventa una función nativa de degradado a lo largo del trazado. Un SVG limpio existente necesita edición directa de pintura y geometría; la guía de vectorización de imágenes explica cuándo ayuda la conversión ráster.
Preguntas frecuentes
¿Puedo hacer que un linearGradient siga cualquier trazo curvo? La definición normal de linearGradient no ofrece un ajuste de distancia del trazado. Su vector de coordenadas controla la pintura. El ejemplo escalonado asigna colores separados a secciones separadas de la ruta.
¿Más paradas de degradado corrigen los colores repetidos al regresar? Más paradas pueden refinar las transiciones de color a lo largo del vector del degradado. Los puntos en la misma posición de ese vector siguen compartiendo la misma pintura basada en coordenadas.
¿El archivo de bandas contiene una imagen ráster? No. Nuestro ejemplo creado contiene ocho elementos path y ningún elemento image. También tiene saltos de color visibles, no un degradado continuo basado en la distancia del trazado.
¿Debo sustituir todos los degradados por trazados separados? Usa el degradado de coordenadas más sencillo cuando encaje con el diseño. Las secciones separadas son útiles cuando su progresión y su costo de edición son aceptables; revisa las juntas y el renderizado de destino antes de entregar.
Fuentes
- W3C — Servidores de pintura SVG2 — Vectores de degradado, paradas y pintura basada en coordenadas.
- MDN — Degradados en SVG — Construcción de degradados lineales y radiales.
- MDN — gradientUnits — Sistemas de coordenadas de espacio de usuario y cuadro delimitador.
- MDN — path — Elementos path y datos de trazados que se pueden inspeccionar.
- MDN — stroke-linecap — Comportamiento de los extremos de trazo planos y redondos.
Más del blog
Redondea esquinas SVG cambiando la forma rellena
Redondea una esquina SVG rellena con un arco tangente, verifica si el radio cabe en sus lados y descubre por qué una unión de trazo redonda no cambia el relleno.
Ajuste de texto SVG: crea líneas medidas con tspan
Ajusta etiquetas SVG midiendo palabras con la fuente real y generando tspans. Prueba etiquetas estrechas, rechaza palabras o líneas que desborden y guarda el resultado.
