Gradiente Linear SVG

Gradientes SVG devem ser definidos dentro da etiqueta <defs>.

Gradiente SVG

Gradiente é uma transição suave de uma cor para outra. Além disso, pode-se aplicar transições de várias cores ao mesmo elemento.

No SVG, existem dois tipos principais de gradiente:

  • Gradiente linear
  • Gradiente radial

Gradiente linear

A etiqueta <linearGradient> é usada para definir gradientes lineares no SVG.

A etiqueta <linearGradient> deve estar aninhada dentro da etiqueta <defs>. A etiqueta <defs> é a abreviação de definitions e pode definir elementos especiais como gradientes.

O gradiente linear pode ser definido como gradiente horizontal, vertical ou angular:

  • Quando y1 e y2 são iguais, e x1 e x2 são diferentes, é possível criar um gradiente horizontal
  • Quando x1 e x2 são iguais, e y1 e y2 são diferentes, é possível criar um gradiente vertical
  • Quando x1 e x2 são diferentes, e y1 e y2 são diferentes, é possível criar um gradiente angular

Copie o código abaixo para um bloco de notas, salve o arquivo como "linear1.svg". Coloque este arquivo na sua pasta de diretório web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Explicação do código:

  • A propriedade id da etiqueta <linearGradient> pode definir um nome único para o gradiente
  • A propriedade fill:url(#orange_red) liga o elemento ellipse a este gradiente
  • As propriedades x1, x2, y1, y2 da etiqueta <linearGradient> podem definir a posição de início e fim do gradiente
  • O intervalo de cores do gradiente pode ser composto por duas ou mais cores. Cada cor é definida por uma etiqueta <stop>. A propriedade offset é usada para definir a posição de início e fim do gradiente.

Ver exemplo (gradiente horizontal)

Outro exemplo:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Ver Exemplo (Gradiente Vertical)