Degradado Radial SVG (radialGradient) - Aprender HTML

Descripción del elemento `<radialGradient>`

Un degradado radial transiciona colores hacia afuera desde un punto central en un patrón circular, como las ondas que se expanden desde una piedra lanzada al agua. El elemento <radialGradient> especifica dicho degradado, que puede aplicarse para rellenar y trazar elementos gráficos.

Esta página explica qué distingue a un degradado radial de uno lineal, cómo definir paradas de color y cómo los atributos gradientUnits y spreadMethod controlan el resultado. Si eres nuevo en SVG, comienza primero con la introducción a SVG.

El elemento <radialGradient> debe estar anidado dentro de un elemento <defs>, que significa definiciones. El elemento <defs> contiene definiciones reutilizables (como degradados) que no se dibujan por sí solas — son referenciadas por otros elementos. Aplicas el degradado asignando un id al <radialGradient> y luego referenciándolo con fill="url(#id)" (o stroke="url(#id)").

Cómo se define un degradado radial

Esto es lo que diferencia un degradado radial de uno lineal. Un degradado radial se define mediante dos círculos:

Un círculo final, definido por cx, cy (su centro) y r (su radio). El degradado termina — alcanza su última parada de color — en el borde de este círculo.
Un punto focal, definido por fx, fy. Es donde el degradado comienza (su primera parada de color). El degradado se irradia hacia afuera desde el punto focal hasta alcanzar el círculo final.

Cuando fx/fy coinciden con cx/cy, el degradado es perfectamente concéntrico. Cuando desplazas el punto focal lejos del centro, el degradado parece descentrado — útil para simular una fuente de luz o el reflejo en una esfera 3D. Si omites fx/fy, toman por defecto los valores de cx/cy.

Paradas de color

Los colores de un degradado se describen mediante uno o más elementos <stop> anidados dentro del <radialGradient>. Cada parada tiene estos atributos:

offset — dónde se ubica la parada a lo largo del degradado, de 0% (el punto focal) a 100% (el borde del círculo final). También puedes usar un número de 0 a 1.
stop-color — el color en ese desplazamiento (cualquier valor de color CSS).
stop-opacity — la opacidad en ese desplazamiento, de 0 (transparente) a 1 (opaco).

Peligro

No confundas un degradado radial SVG con la función CSS radial-gradient. Los degradados CSS pueden aplicarse al fondo de cualquier elemento, mientras que los degradados SVG solo se aplican a elementos SVG.

Ejemplo del elemento SVG `<radialGradient>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con un punto focal descentrado

Mover fx/fy lejos de cx/cy desplaza el punto de inicio del degradado. Aquí el punto focal se desplaza hacia la parte superior izquierda del círculo, lo que hace que la forma parezca una esfera iluminada — el reflejo está cerca del punto focal y el color se intensifica hacia el círculo final:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Control de unidades con `gradientUnits`

El atributo gradientUnits decide qué sistema de coordenadas se usa para medir cx, cy, r, fx e fy:

objectBoundingBox (el valor predeterminado) — las coordenadas son relativas al cuadro delimitador del elemento que se rellena. Usa porcentajes o fracciones (0 a 1), donde 50% representa el centro de la forma. El degradado se escala automáticamente con la forma.
userSpaceOnUse — las coordenadas usan el sistema de coordenadas de usuario del lienzo SVG (las mismas unidades que las formas). Usa valores absolutos como cx="200". Esto es útil cuando un degradado debe ser compartido por varias formas en una posición fija.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Control de los bordes con `spreadMethod`

spreadMethod define qué sucede más allá del círculo final cuando el degradado no cubre toda la forma (por ejemplo, cuando r es menor que la forma, o el punto focal está desplazado):

pad (el valor predeterminado) — la última parada de color continúa como un relleno sólido hasta los bordes.
reflect — el degradado se refleja, repitiéndose hacia afuera como ...borde → centro → borde → centro...
repeat — el degradado se reinicia desde el principio cada vez, repitiéndose hacia afuera como ...centro → borde, centro → borde...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Atributos

Atributo	Descripción
cx	Especifica la coordenada x del círculo final del degradado.
cy	Especifica la coordenada y del círculo final del degradado.
r	Especifica el radio del círculo final del degradado.
fx	Especifica la coordenada x del círculo inicial del degradado.
fy	Especifica la coordenada y del círculo inicial del degradado.
gradientUnits	Especifica el sistema de coordenadas para `cx`, `cy`, `r`, `fx` e `fy`. Valores: `objectBoundingBox` (predeterminado) o `userSpaceOnUse`.
gradientTransform	Aplica una transformación adicional al sistema de coordenadas del degradado.
href	Referencia de URL a otro elemento "radialGradient" o "linearGradient".
spreadMethod	Especifica cómo se comporta el degradado cuando comienza o termina dentro de los límites de los objetos que lo contienen. Valores: `pad`, `repeat` o `reflect`.

El elemento SVG <radialGradient> también admite los Atributos Globales y los Atributos de Evento.

Capítulos relacionados

Degradado lineal SVG — el otro tipo de degradado, definido por una dirección en lugar de dos círculos.
Introducción a SVG — los conceptos básicos para trabajar con SVG en HTML.
Referencia SVG — una lista completa de elementos y atributos SVG.

Práctica

¿Qué atributos definen el punto focal (inicio) de un degradado radial SVG?

fx, fycx, cyx1, y1dx, dy

Descripción del elemento <radialGradient>