# Degradados SVG: lineales, radiales, trazos, texto y máscaras [Canonical HTML page](https://gradiently.design/es/guide/svg-gradients) SVG tiene su propio sistema de degradados, más antiguo que los de CSS y capaz de cosas que estos no pueden: colorear un trazo, rellenar una palabra, compartir un degradado entre muchas formas y fundir cualquier cosa con una máscara. ## The short version - Un degradado SVG se define una vez como un elemento linearGradient o radialGradient con hijos stop, se le da un id y se aplica con fill o stroke igual a url(#id). - Por defecto, las coordenadas de un degradado SVG usan unidades objectBoundingBox, en las que 0 y 1 son los bordes de la forma que se pinta. - gradientUnits="userSpaceOnUse" coloca el degradado en las coordenadas propias del dibujo, lo que permite que un degradado abarque varias formas y soluciona los degradados en líneas perfectamente rectas. - spreadMethod decide qué pasa más allá de los extremos del degradado: pad mantiene los colores finales, reflect refleja la mezcla y repeat la vuelve a empezar. - Una máscara SVG usa la luminosidad, así que un degradado de blanco a negro dentro de una máscara funde aquello a lo que se aplica. Un **degradado SVG** es una pintura que defines una vez y aplicas a cualquier forma, línea o texto de un SVG. Escribes un elemento `` o `` dentro de ``, le das hijos `` para sus colores y un `id`, y luego pones el `fill` o el `stroke` de una forma a `url(#id)`. A diferencia de un fondo CSS, puede colorear un trazo o una sola palabra, y escala con el dibujo. ```html ``` Un degradado diagonal en un rectángulo redondeado. x1, y1, x2 e y2 trazan la línea del degradado de arriba a la izquierda a abajo a la derecha. La misma mezcla, en CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` El SVG de arriba y este degradado CSS coinciden en un cuadrado. En un rectángulo, la versión SVG se estira con la forma; mira gradientUnits más abajo. ## linearGradient y sus paradas `x1`, `y1`, `x2` e `y2` fijan el inicio y el final de la línea del degradado. Cada `` lleva un `offset` de 0 a 1 (o de 0% a 100%), un `stop-color` y un `stop-opacity` opcional. `stop-color` también es una propiedad CSS, así que puedes cambiar el tema de los degradados desde una hoja de estilos, por ejemplo `stop { stop-color: var(--accent); }`. | Atributo | Por defecto | Qué hace | | --- | --- | --- | | `x1 y1 x2 y2` | `0 0 1 0`, de izquierda a derecha | Puntos de inicio y final de la línea del degradado | | `gradientUnits` | `objectBoundingBox` | Si las coordenadas son relativas a la forma o al dibujo | | `spreadMethod` | `pad` | Qué pasa más allá de los extremos: `pad`, `reflect` o `repeat` | | `gradientTransform` | ninguno | Gira, escala o inclina el degradado, p. ej. `rotate(30)` | | `href` | ninguno | Hereda las paradas y los ajustes de otro degradado | Los atributos principales de linearGradient. radialGradient comparte todos menos la primera fila. `href` ahorra repeticiones. Define tus paradas una vez en un degradado base y luego crea variaciones que apunten a él y cambien solo la dirección o las unidades. La [referencia de linearGradient en MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) cubre todos los atributos. ## radialGradient: centro, radio y punto focal Un degradado radial toma un centro (`cx`, `cy`) y un radio (`r`), todos con 0,5 por defecto, así que rellena la forma desde el centro. También tiene algo que a CSS le falta: un punto focal independiente (`fx`, `fy`) donde empieza el primer color. Mover el punto focal fuera del centro hace que una esfera parezca iluminada desde un lado. ```html ``` Un punto focal arriba a la izquierda convierte un círculo plano en una esfera brillante. Esfera iluminada, aproximada en CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` CSS puede mover el centro, pero no separar centro y foco, así que esto es solo una aproximación de la esfera SVG. Compáralo con [los degradados radiales en CSS](https://gradiently.design/es/guide/css-radial-gradient). ## gradientUnits: objectBoundingBox o userSpaceOnUse Con el valor por defecto, `objectBoundingBox`, 0 y 1 significan los bordes de la forma que se esté pintando, así que cada forma recibe el degradado entero, estirado para encajar. Con `userSpaceOnUse`, las coordenadas están en las unidades propias del SVG, así que el degradado se queda en su sitio y cada forma muestra la parte que cubre. Así es como una fila de barras puede compartir un único degradado continuo. ### objectBoundingBox - Coordenadas de 0 a 1 a lo largo de cada forma - Cada forma muestra el degradado completo - El degradado se estira con las proporciones de la forma - Falla en una línea perfectamente horizontal o vertical ### userSpaceOnUse - Coordenadas en las unidades propias del dibujo - Cada forma muestra su trozo de un único degradado - Los ángulos se mantienen sea cual sea la forma - Funciona en líneas rectas y trazos finos > **La línea recta invisible** Una `` horizontal tiene una caja delimitadora de altura cero, y las unidades de caja delimitadora no se pueden calcular a partir de cero, así que un trazo con degradado por defecto no muestra nada. Pon `gradientUnits="userSpaceOnUse"` y da coordenadas reales. ## Degradados en trazos y texto `stroke="url(#id)"` pinta los contornos, y así se dibujan los iconos con degradado, los anillos de progreso y las líneas de los gráficos. En ``, `fill="url(#id)"` colorea las letras y las palabras siguen siendo seleccionables y buscables. Añade un color plano después de la URL, como `fill="url(#dusk) #7c3aed"`, y se usará si no se encuentra el degradado. ```html ``` Un degradado en unidades del dibujo, compartido por una curva y una palabra. Los dos van del cian al morado a lo largo del mismo tramo horizontal. Para letras con degradado en HTML y no en SVG, [el texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text) suele ser más sencillo. Recurre al texto SVG cuando las palabras formen parte de una ilustración o un logotipo, o tengan que seguir un trazado. ## spreadMethod: pad, reflect y repeat Cuando la línea del degradado es más corta que la forma, `spreadMethod` decide qué rellena el resto. `pad` mantiene los colores de los extremos, `reflect` refleja la mezcla de ida y vuelta y `repeat` la vuelve a empezar con un borde duro. Aquí cada degradado va del 30% al 70% del ancho. - pad: `linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` - reflect: `repeating-linear-gradient(90deg, #fde68a -10%, #0f766e 30%, #fde68a 70%)` - repeat: `repeating-linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` Del verde azulado a la arena con los tres métodos de extensión, reproducidos en CSS para que puedas compararlos uno junto a otro. ## Fundidos con máscaras SVG Una máscara usa la luminosidad: las zonas blancas muestran lo enmascarado, las negras lo ocultan y los grises quedan a medio camino. Por eso un degradado de blanco a negro dentro de una `` funde cualquier forma o imagen suavemente hasta desaparecer, y así se suaviza el borde de una foto o se hace que la línea de un gráfico se desvanezca al principio. ```html ``` La foto se ve entera arriba y se desvanece a lo largo de su 60% inferior. En los elementos HTML, `mask-image: linear-gradient(#000 40%, transparent)` en CSS hace lo mismo, usando la transparencia en lugar de la luminosidad. La técnica de la máscara también sirve para los [bordes con degradado en CSS](https://gradiently.design/es/guide/css-gradient-border) transparentes. ### Evita - Reutilizar el mismo `id` de degradado en dos SVG en línea de una misma página - Ocultar un sprite de definiciones de degradado con `display: none` - Las unidades por defecto en líneas rectas - Degradados oscuros muy largos y suaves sin textura ### Haz - Ids únicos, o un único sprite de definiciones compartido - Oculta los sprites con ancho y alto cero - `userSpaceOnUse` para trazos y degradados compartidos - Añade grano a los fundidos grandes, mira [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture) ## FAQ ### ¿Cómo añado un degradado a un SVG? Define un `` o `` con hijos `` y un `id` dentro de ``, y luego pon el `fill` o el `stroke` de una forma a `url(#id)`. ### ¿Por qué no se ve el trazo con degradado SVG en una línea? Una línea recta horizontal o vertical tiene una caja delimitadora de tamaño cero, así que las unidades `objectBoundingBox` por defecto fallan. Usa `gradientUnits="userSpaceOnUse"` con coordenadas reales. ### ¿Cómo giro un degradado SVG? Cambia `x1`, `y1`, `x2` e `y2`, o añade `gradientTransform="rotate(45 0.5 0.5)"` para girarlo alrededor del centro de la caja delimitadora. ### ¿Puedo cambiar los colores de un degradado SVG con CSS? Sí. `stop-color` y `stop-opacity` son propiedades CSS, así que reglas como `stop { stop-color: var(--accent); }` funcionan en SVG en línea. ### ¿Por qué desapareció mi degradado SVG al ocultar el SVG? Las definiciones dentro de un SVG con `display: none` pueden no renderizarse. Oculta el sprite con ancho y alto cero, o con posicionamiento absoluto.