Elemento SVG linearGradient e Gradientes Lineares

Um gradiente linear é uma transição fluida de uma cor para outra ao longo de uma linha reta. Em SVG, você o cria com dois elementos trabalhando juntos: um <linearGradient> que define a direção e o sistema de coordenadas da linha, e um ou mais filhos <stop> que posicionam as cores ao longo dela. Em seguida, você aponta o fill (ou stroke) de uma forma para o gradiente pelo seu id, usando fill="url(#myGradient)".

Esta página aborda o elemento <linearGradient>, seus filhos <stop>, as coordenadas x1/x2/y1/y2 que direcionam o gradiente, e os atributos gradientUnits e spreadMethod que controlam como ele é mapeado e repetido.

Descrição dos gradientes SVG

Um gradiente é uma mistura suave de cores que pode ser reutilizada como pintura para qualquer número de formas. O SVG tem dois tipos principais de gradientes:

linear — as cores se mesclam ao longo de uma linha reta (esta página).
radial — as cores se mesclam para fora a partir de um ponto central. Veja SVG radialGradient.

O elemento `<linearGradient>`

O elemento <linearGradient> define um gradiente linear que preenche (ou traça) elementos gráficos. É uma definição, não uma forma visível, portanto fica dentro de um bloco <defs>, recebe um id e é referenciado a partir de uma forma com fill="url(#id)".

A direção do gradiente é definida pelo ponto inicial (x1, y1) e pelo ponto final (x2, y2). A linha do gradiente vai do ponto inicial ao ponto final; as cores são interpoladas ao longo dela.

Os gradientes lineares podem ser horizontais, verticais ou angulares:

Horizontal — y1 e y2 são iguais, enquanto x1 e x2 diferem.
Vertical — x1 e x2 são iguais, enquanto y1 e y2 diferem.
Angular (diagonal) — tanto o par x quanto o par y diferem.

Informação

Se você omitir as coordenadas, os padrões do SVG são x1="0%", y1="0%", x2="100%", y2="0%" — um gradiente horizontal da esquerda para a direita.

Perigo

Não confunda um gradiente linear SVG com a função CSS linear-gradient. Os gradientes CSS pintam elementos HTML via background-image, enquanto os gradientes SVG pintam formas SVG via fill ou stroke.

O elemento `<stop>`

Cada <stop> coloca uma única cor em uma posição ao longo da linha do gradiente. Você precisa de pelo menos dois stops para ver uma transição. Os stops podem ser estilizados com atributos de apresentação (stop-color, stop-opacity) ou com o CSS equivalente dentro de um atributo style, como nos exemplos abaixo.

Atributo	Descrição
`offset`	Onde o stop se posiciona ao longo da linha do gradiente, como um número `0`–`1` ou uma porcentagem `0%`–`100%`. `0%` é o ponto inicial, `100%` é o ponto final.
`stop-color`	A cor do stop. Aceita qualquer cor CSS (nomeada, `#hex`, `rgb()`, `hsl()`). O padrão é `black`.
`stop-opacity`	A opacidade da cor do stop, de `0` (transparente) a `1` (opaco). O padrão é `1`.

Exemplo do elemento `<linearGradient>` para criar uma elipse com um gradiente linear 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>

Experimente Você Mesmo »

Exemplo do elemento `<linearGradient>` para criar uma elipse com um gradiente linear 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>

Experimente Você Mesmo »

Exemplo de um gradiente linear angular (diagonal):

Por padrão, gradientUnits é objectBoundingBox, portanto as coordenadas são frações da caixa delimitadora da forma. Usar x1="0" y1="0" x2="1" y2="1" traça a linha do gradiente do canto superior esquerdo ao canto inferior direito, produzindo uma mistura 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>

O atributo `gradientUnits`

gradientUnits define como x1, y1, x2 e y2 são interpretados:

objectBoundingBox (padrão) — as coordenadas são relativas à forma sendo pintada, onde 0 (ou 0%) é uma borda e 1 (ou 100%) é a borda oposta. O gradiente se ajusta automaticamente a cada forma.
userSpaceOnUse — as coordenadas são posições absolutas no sistema de coordenadas do usuário do SVG (as mesmas unidades que as próprias coordenadas x/y da forma).

Um problema comum: com userSpaceOnUse, as coordenadas em porcentagem e 0–1 deixam de rastrear a forma. Você deve fornecer coordenadas reais (por exemplo, x1="20" y1="0" x2="280" y2="0") que se sobreponham à forma, ou o preenchimento pode parecer plano (uma única cor) porque a linha do gradiente nunca a atravessa.

O atributo `spreadMethod`

spreadMethod controla o que acontece fora do segmento [x1,y1]–[x2,y2] quando a linha do gradiente é mais curta que a forma. Ele só tem efeito visível quando o gradiente não abrange toda a forma.

Valor	Comportamento
`pad` (padrão)	As cores do primeiro e do último stop se estendem ("preenchem") para preencher a área restante.
`reflect`	O gradiente espelha de volta e para frente, repetindo em direções alternadas.
`repeat`	O gradiente se repete em mosaico, saltando do último stop de volta ao primeiro.

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

Altere spreadMethod="repeat" para reflect ou pad no exemplo acima para comparar os três comportamentos: repeat produz saltos bruscos de cor, reflect produz um efeito suave de vai e vem, e pad exibe o gradiente uma vez e depois um bloco sólido da última cor.

Atributos

Valor	Descrição
gradientUnits	Este atributo especifica o sistema de coordenadas para os atributos x1, x2, y1, y2. Valores: `userSpaceOnUse`, `objectBoundingBox`.
gradientTransform	Este atributo fornece uma transformação extra ao sistema de coordenadas do gradiente.
href	Este atributo especifica uma referência a outro elemento `<linearGradient>`.
spreadMethod	Este atributo especifica como o gradiente se comporta caso comece ou termine dentro dos limites da forma que contém o gradiente. Valores: `pad`, `repeat`, `reflect`.
x1	Este atributo especifica a coordenada x do ponto inicial do vetor gradiente ao longo do qual o gradiente linear é desenhado.
x2	Este atributo especifica a coordenada x do ponto final do vetor gradiente ao longo do qual o gradiente linear é desenhado.
y1	Este atributo especifica a coordenada y do ponto inicial do vetor gradiente ao longo do qual o gradiente linear é desenhado.
y2	Este atributo especifica a coordenada y do ponto final do vetor gradiente ao longo do qual o gradiente linear é desenhado.

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

Para misturas de cores radiais que se expandem a partir de um ponto central em vez de ao longo de uma linha, veja SVG radialGradient.

Prática

Qual atributo posiciona uma única cor em um ponto ao longo da linha de um gradiente linear SVG?

O atributo offset de um elemento stop.O atributo spreadMethod.O atributo gradientUnits.O atributo stop-opacity.

Prática

Selecione todas as opções corretas: o que os atributos x1, y1, x2 e y2 fazem em um linearGradient? (Selecione todas as que se aplicam)

Eles definem os pontos inicial e final da linha do gradiente.Eles ajustam a cor do gradiente.Eles determinam a orientação: horizontal, vertical ou diagonal.Eles definem a duração de uma animação SVG.

Descrição dos gradientes SVG

O elemento <linearGradient>

O elemento <stop>

Exemplo do elemento <linearGradient> para criar uma elipse com um gradiente linear horizontal:

Exemplo do elemento <linearGradient> para criar uma elipse com um gradiente linear vertical:

Exemplo de um gradiente linear angular (diagonal):

O atributo gradientUnits

O atributo spreadMethod

Atributos

Prática

O elemento `<linearGradient>`

O elemento `<stop>`

Exemplo do elemento `<linearGradient>` para criar uma elipse com um gradiente linear horizontal:

Exemplo do elemento `<linearGradient>` para criar uma elipse com um gradiente linear vertical:

O atributo `gradientUnits`

O atributo `spreadMethod`