SVG linearGradient
Aprende el elemento SVG linearGradient y sus hijos stop: offset, stop-color, x1/x2/y1/y2, gradientUnits y spreadMethod, con ejemplos ejecutables.
Un gradiente lineal es una transición fluida de un color a otro a lo largo de una línea recta. En SVG se construye con dos elementos que trabajan juntos: un <linearGradient> que define la dirección y el sistema de coordenadas de la línea, y uno o más hijos <stop> que colocan colores a lo largo de ella. Luego apuntas el fill (o stroke) de una forma al gradiente por su id, usando fill="url(#myGradient)".
Esta página cubre el elemento <linearGradient>, sus hijos <stop>, las coordenadas x1/x2/y1/y2 que orientan el gradiente, y los atributos gradientUnits y spreadMethod que controlan cómo se mapea y se repite.
Descripción de los gradientes SVG
Un gradiente es una mezcla suave de colores que puede reutilizarse como pintura para cualquier número de formas. SVG tiene dos tipos principales de gradientes:
- lineal — los colores se mezclan a lo largo de una línea recta (esta página).
- radial — los colores se mezclan hacia afuera desde un punto central. Ver SVG radialGradient.
El elemento <linearGradient>
El elemento <linearGradient> define un gradiente lineal que rellena (o traza) elementos gráficos. Es una definición, no una forma visible, por lo que vive dentro de un bloque <defs>, se le asigna un id, y se referencia desde una forma con fill="url(#id)".
La dirección del gradiente se establece mediante el punto de inicio (x1, y1) y el punto final (x2, y2). La línea del gradiente va desde el punto de inicio hasta el punto final; los colores se interpolan a lo largo de ella.
Los gradientes lineales pueden ser horizontales, verticales o angulares:
- Horizontal —
y1ey2son iguales, mientras quex1yx2difieren. - Vertical —
x1yx2son iguales, mientras quey1ey2difieren. - Angular (diagonal) — tanto el par x como el par y difieren.
Si omites las coordenadas, los valores predeterminados de SVG son x1="0%", y1="0%", x2="100%", y2="0%" — un gradiente horizontal de izquierda a derecha.
No confundas un gradiente lineal SVG con la función CSS linear-gradient. Los gradientes CSS pintan elementos HTML mediante background-image, mientras que los gradientes SVG pintan formas SVG mediante fill o stroke.
El elemento <stop>
Cada <stop> coloca un único color en una posición a lo largo de la línea del gradiente. Necesitas al menos dos stops para ver una transición. Los stops pueden estilizarse con atributos de presentación (stop-color, stop-opacity) o con el CSS equivalente dentro de un atributo style, como en los ejemplos a continuación.
| Atributo | Descripción |
|---|---|
offset | Dónde se sitúa el stop a lo largo de la línea del gradiente, como un número 0–1 o un porcentaje 0%–100%. 0% es el punto de inicio, 100% es el punto final. |
stop-color | El color del stop. Acepta cualquier color CSS (nombrado, #hex, rgb(), hsl()). Por defecto es black. |
stop-opacity | La opacidad del color del stop, de 0 (transparente) a 1 (opaco). Por defecto es 1. |
Ejemplo del elemento <linearGradient> para crear una elipse con un gradiente lineal horizontal:
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>Ejemplo del elemento <linearGradient> para crear una elipse con un gradiente lineal vertical:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>Ejemplo de un gradiente lineal angular (diagonal):
Por defecto gradientUnits es objectBoundingBox, por lo que las coordenadas son fracciones del cuadro delimitador de la forma. Usar x1="0" y1="0" x2="1" y2="1" traza la línea del gradiente desde la esquina superior izquierda hasta la esquina inferior derecha, produciendo una mezcla diagonal.
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="diagonal" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="20" y="20" width="260" height="160" fill="url(#diagonal)" />
</svg>
</body>
</html>El atributo gradientUnits
gradientUnits decide cómo se interpretan x1, y1, x2 e y2:
objectBoundingBox(predeterminado) — las coordenadas son relativas a la forma que se está pintando, donde0(o0%) es un borde y1(o100%) es el borde opuesto. El gradiente se estira automáticamente para ajustarse a cada forma.userSpaceOnUse— las coordenadas son posiciones absolutas en el sistema de coordenadas de usuario del SVG (las mismas unidades que los propiosx/yde la forma).
Un error común: con userSpaceOnUse, las coordenadas en porcentaje y de 0–1 ya no siguen la forma. Debes dar coordenadas reales (p. ej., x1="20" y1="0" x2="280" y2="0") que se superpongan a la forma, o el relleno puede aparecer plano (un único color) porque la línea del gradiente nunca la cruza.
El atributo spreadMethod
spreadMethod controla lo que ocurre fuera del segmento [x1,y1]–[x2,y2] cuando la línea del gradiente es más corta que la forma. Solo tiene un efecto visible cuando el gradiente no abarca toda la forma.
| Valor | Comportamiento |
|---|---|
pad (predeterminado) | Los colores del primer y último stop se extienden ("rellenan") para cubrir el área restante. |
reflect | El gradiente se refleja de un lado a otro, repitiéndose en direcciones alternantes. |
repeat | El gradiente se repite en mosaico, saltando desde el último stop de vuelta al primero. |
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="300">
<defs>
<linearGradient id="repeated" x1="0" y1="0" x2="0.2" y2="0"
spreadMethod="repeat">
<stop offset="0%" stop-color="rgb(28, 135, 201)" />
<stop offset="100%" stop-color="rgb(128, 0, 128)" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="120" fill="url(#repeated)" />
</svg>
</body>
</html>Cambia spreadMethod="repeat" por reflect o pad en el ejemplo anterior para comparar los tres comportamientos: repeat produce saltos de color bruscos, reflect produce un suave ping-pong, y pad muestra el gradiente una vez y luego un bloque sólido del último color.
Atributos
| Valor | Descripción |
|---|---|
| gradientUnits | Este atributo especifica el sistema de coordenadas para los atributos x1, x2, y1, y2. Valores: userSpaceOnUse, objectBoundingBox. |
| gradientTransform | Este atributo aplica una transformación adicional al sistema de coordenadas del gradiente. |
| href | Este atributo especifica una referencia a otro elemento <linearGradient>. |
| spreadMethod | Este atributo especifica cómo se comporta el gradiente si comienza o termina dentro de los límites de la forma que lo contiene. Valores: pad, repeat, reflect. |
| x1 | Este atributo especifica la coordenada x del punto de inicio del vector gradiente a lo largo del cual se dibuja el gradiente lineal. |
| x2 | Este atributo especifica la coordenada x del punto final del vector gradiente a lo largo del cual se dibuja el gradiente lineal. |
| y1 | Este atributo especifica la coordenada y del punto de inicio del vector gradiente a lo largo del cual se dibuja el gradiente lineal. |
| y2 | Este atributo especifica la coordenada y del punto final del vector gradiente a lo largo del cual se dibuja el gradiente lineal. |
El elemento SVG <linearGradient> también admite los Atributos Globales y los Atributos de Eventos.
Para mezclas de color radiales que se extienden hacia afuera desde un punto central en lugar de a lo largo de una línea, consulta SVG radialGradient.