Gradientes SVG - Linear

Gradientes SVG

Um gradiente é uma transição suave de uma cor para outra. Além disso, várias transições de cores podem ser aplicadas ao mesmo elemento.

Existem dois tipos principais de gradientes em SVG:

• Linear
• Radial

Gradiente Linear SVG - <linearGradient>

O elemento <linearGradient> é usado para definir um gradiente linear.

O elemento <linearGradient> deve ser aninhado dentro de uma tag <defs>. A tag <defs> é a abreviação de definições e contém a definição de elementos especiais (como gradientes).

Os gradientes lineares podem ser definidos como gradientes horizontais, verticais ou angulares:

• Os gradientes horizontais são criados quando y1 e y2 são iguais e x1 e x2 diferem
• Os gradientes verticais são criados quando x1 e x2 são iguais e y1 e y2 diferem
• Os gradientes angulares são criados quando x1 e x2 diferem e y1 e y2 diferem

Exemplo 1

Defina uma elipse com um gradiente linear horizontal de amarelo para vermelho:

Segue o código SVG:

Explicação do código:

• O atributo id da tag <linearGradient> define um nome exclusivo para o gradiente
• Os atributos x1, x2, y1,y2 da tag <linearGradient> definem a posição inicial e final do gradiente
• A gama de cores para um gradiente pode ser composta por duas ou mais cores. Cada cor é especificada com uma tag <stop>. O atributo offset é usado para definir onde a cor do gradiente começa e termina
• O atributo fill vincula o elemento elipse ao gradiente

Exemplo 2

Defina uma elipse com um gradiente linear vertical de amarelo para vermelho:

Segue o código SVG:

Exemplo 3

Defina uma elipse com um gradiente linear horizontal de amarelo para vermelho e adicione um texto dentro da elipse:

Segue o código SVG:

Explicação do código:

• O elemento <text> é usado para adicionar um texto