Gradiente Radial SVG (radialGradient)

Descrição do elemento `<radialGradient>`

Um gradiente radial faz a transição de cores a partir de um ponto central em um padrão circular, como ondas se espalhando de uma pedra lançada na água. O elemento <radialGradient> especifica esse tipo de gradiente, que pode ser aplicado ao preenchimento e ao contorno de elementos gráficos.

Esta página aborda o que diferencia um gradiente radial de um linear, como definir paradas de cor e como os atributos gradientUnits e spreadMethod controlam o resultado. Se você é novo em SVG, comece pela introdução ao SVG primeiro.

O elemento <radialGradient> deve estar aninhado dentro de um elemento <defs>, que significa definições. O elemento <defs> contém definições reutilizáveis (como gradientes) que não são desenhadas por conta própria — elas são referenciadas por outros elementos. Para aplicar o gradiente, você dá ao <radialGradient> um id e o referencia com fill="url(#id)" (ou stroke="url(#id)").

Como um gradiente radial é definido

É isso que diferencia o gradiente radial do linear. Um gradiente radial é definido por dois círculos:

Um círculo final, definido por cx, cy (seu centro) e r (seu raio). O gradiente termina — alcança sua última parada de cor — na borda deste círculo.
Um ponto focal, definido por fx, fy. É onde o gradiente começa (sua primeira parada de cor). O gradiente irradia para fora a partir do ponto focal até alcançar o círculo final.

Quando fx/fy coincidem com cx/cy, o gradiente é perfeitamente concêntrico. Quando você move o ponto focal para longe do centro, o gradiente fica descentrado — útil para simular uma fonte de luz ou o realce de uma esfera 3D. Se você omitir fx/fy, eles assumem os valores de cx/cy por padrão.

Paradas de cor

As cores de um gradiente são descritas por um ou mais elementos <stop> aninhados dentro do <radialGradient>. Cada parada tem estes atributos:

offset — onde a parada se situa ao longo do gradiente, de 0% (o ponto focal) a 100% (a borda do círculo final). Você também pode usar um número de 0 a 1.
stop-color — a cor naquele offset (qualquer valor de cor CSS).
stop-opacity — a opacidade naquele offset, de 0 (transparente) a 1 (opaco).

Perigo

Não confunda um gradiente radial SVG com a função CSS radial-gradient. Gradientes CSS podem ser aplicados ao fundo de qualquer elemento, enquanto gradientes SVG se aplicam apenas a elementos SVG.

Exemplo do 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>

Experimente Você Mesmo »

Exemplo com ponto focal descentrado

Mover fx/fy para longe de cx/cy desloca o ponto de início do gradiente. Aqui o ponto focal é deslocado em direção ao canto superior esquerdo do círculo, o que faz a forma parecer uma esfera iluminada — o realce fica próximo ao ponto focal e a cor aprofunda em direção ao 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>

Controlando unidades com `gradientUnits`

O atributo gradientUnits decide qual sistema de coordenadas é usado para medir cx, cy, r, fx e fy:

objectBoundingBox (o padrão) — as coordenadas são relativas à caixa delimitadora do elemento que está sendo preenchido. Use porcentagens ou frações (0 a 1), onde 50% significa o centro da forma. O gradiente escala automaticamente com a forma.
userSpaceOnUse — as coordenadas usam o sistema de coordenadas do usuário da própria tela SVG (as mesmas unidades das formas). Use valores absolutos como cx="200". Isso é útil quando um gradiente deve ser compartilhado por várias formas em uma posição fixa.

<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>

Controlando as bordas com `spreadMethod`

spreadMethod define o que acontece além do círculo final quando o gradiente não cobre toda a forma (por exemplo, quando r é menor que a forma, ou o ponto focal está deslocado):

pad (o padrão) — a última parada de cor continua como preenchimento sólido até as bordas.
reflect — o gradiente é espelhado, repetindo para fora como ...borda → centro → borda → centro...
repeat — o gradiente reinicia do início a cada vez, repetindo para fora como ...centro → borda, centro → borda...

<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	Descrição
cx	Especifica a coordenada x do círculo final do gradiente.
cy	Especifica a coordenada y do círculo final do gradiente.
r	Especifica o raio do círculo final do gradiente.
fx	Especifica a coordenada x do círculo inicial do gradiente.
fy	Especifica a coordenada y do círculo inicial do gradiente.
gradientUnits	Especifica o sistema de coordenadas para `cx`, `cy`, `r`, `fx` e `fy`. Valores: `objectBoundingBox` (padrão) ou `userSpaceOnUse`.
gradientTransform	Aplica uma transformação adicional ao sistema de coordenadas do gradiente.
href	Uma referência de URL a outro elemento "radialGradient" ou "linearGradient".
spreadMethod	Especifica como o gradiente se comporta quando começa ou termina dentro dos limites dos objetos que contêm o gradiente. Valores: `pad`, `repeat` ou `reflect`.

O elemento SVG <radialGradient> também suporta os Atributos Globais e os Atributos de Evento.

Capítulos relacionados

Gradiente linear SVG — o outro tipo de gradiente, definido por uma direção em vez de dois círculos.
Introdução ao SVG — os fundamentos do trabalho com SVG em HTML.
Referência SVG — uma lista completa de elementos e atributos SVG.

Prática

Quais atributos definem o ponto focal (início) de um gradiente radial SVG?

fx, fycx, cyx1, y1dx, dy

Descrição do elemento <radialGradient>