Gradiente Linear do SVG

SVG Gradiente

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

Existem dois tipos principais de gradiente no SVG:

• Gradiente Linear
• Gradiente Radial

SVG Gradiente Linear - <linearGradient>

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

<linearGradient> O elemento deve estar aninhado dentro de <defs> dentro da marcação.<defs> O elemento é uma abreviação de definições, que contém definições de elementos especiais (por exemplo, filtros).

A gradiente linear pode ser definida como gradiente horizontal, vertical ou angular:

• Crie uma gradiente horizontal quando y1 e y2 forem iguais e x1 e x2 não forem iguais
• Crie uma gradiente vertical quando x1 e x2 forem iguais e y1 e y2 não forem iguais
• Crie uma gradiente angular quando x1 e x2 forem diferentes e y1 e y2 não forem iguais

Exemplo 1

Define um elipse com gradiente linear de amarelo para vermelho:

Este é o código SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Experimente você mesmo

Explicação do Código:

• O atributo id do <linearGradient> define o nome único do gradiente
• Os atributos x1, x2, y1, y2 do <linearGradient> definem 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 é especificada por um marcador <stop>
• A propriedade offset define a posição de início e fim da cor do gradiente
• A propriedade fill liga o elemento elipse ao gradiente

Exemplo 2

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

Este é o código SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Experimente você mesmo

Exemplo 3

Define um elipse e adiciona texto dentro dela, com uma gradiente horizontal linear de amarelo para vermelho:

Este é o código SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Experimente você mesmo

Explicação do Código:

• O elemento <text> é usado para adicionar texto