SVG Gradientes - Linear

SVG gradientes

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

Existem dois principais tipos de gradientes em SVG:

• Linear
• Radial

SVG Gradiente Linear - <linearGradient>

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

O <linearGradient> elemento deve ser aninhados dentro de um <defs> tag. O <defs> tag é curto para definições e contém definição de elementos especiais (such as gradients) .

Os gradientes lineares pode ser definida como gradientes horizontais, verticais ou angulares:

• gradientes horizontais são criadas quando Y1 e Y2 são iguais e X1 e X2 são diferentes
• gradientes verticais são criados quando X1 e X2 são iguais e Y1 e Y2 são diferentes
• gradientes angulares são criados quando X1 e X2 são diferentes e Y1 e Y2 diferem

exemplo 1

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

Aqui está o código SVG:

Code explanation:

• O id atributo do <linearGradient> tag define um nome exclusivo para o gradiente
• O x1, x2, y1, y2 atributos do <linearGradient> tag definir a posição de início e final do gradiente
• A gama de cores para um gradiente pode ser composta por duas ou mais cores. Cada cor é especificado com um <stop> tag. O offset atributo é usado para definir onde o gradiente de cor começam e terminam
• O fill atributo liga o elemento elipse para o gradiente

exemplo 2

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

Aqui está o código SVG:

exemplo 3

Definir uma elipse com um gradiente linear horizontal do amarelo ao vermelho, e adicionar um texto dentro da elipse:

Aqui está o código SVG:

Code explanation:

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