SVG Gradiente - Linear

SVG Gradiente

O gradiente é uma transição suave de uma para outra cor a cor. Além disso, a passagem pode ser aplicada a uma pluralidade de cores sobre o mesmo elemento.

Existem dois tipos principais de SVG Gradiente:

linear
radial

gradientes lineares SVG - <linearGradient>

<LinearGradient> é utilizado para definir um gradiente linear.

<LinearGradient> tag deve ser aninhado dentro <defs> interior. tag <Defs> é as definições acrônimo, tais como elementos especiais que podem ser definidos como gradiente.

gradiente linear pode ser definida como horizontal gradiente, vertical ou ângulo:

Quando Y1 e Y2 são iguais, mas não ambos X1 e X2, criar um gradiente horizontal
Quando X1 e X2 igual, Y1 e Y2 não são os mesmos, você pode criar um gradiente vertical
Quando X1 e X2 são diferentes e Y1 e Y2 não são os mesmos, você pode criar um ângulo de inclinação

exemplo 1

Ele define o gradiente linear horizontal do amarelo ao vermelho oval:

Aqui está o código SVG:

Exemplos

tente »

Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).

análise de código:

tag atributo id <linearGradient> pode ser um nome único para a definição de gradientes
<LinearGradient> tag X1, X2, Y1, Y2 atributo define o início e final do gradiente
gama de cores de gradiente de duas ou mais cores. Cada cor por uma tag <param> para especificar. de deslocamento é utilizado para definir a posição de início e fim do gradiente.
Preencha elemento de propriedade de ligação para o gradiente da elipse