Gradiente lineare SVG

SVG degradazione

La degradazione è una transizione fluida da un colore all'altro. Inoltre, è possibile applicare transizioni di colore multiple allo stesso elemento.

In SVG ci sono due tipi principali di degradazione:

  • Gradiente lineare
  • Gradiente radiante

SVG degradazione lineare - <linearGradient>

<linearGradient> L'elemento viene utilizzato per definire la degradazione lineare.

<linearGradient> L'elemento deve essere incluso all'interno di <defs> All'interno del tag.<defs> L'elemento è l'abbreviazione di definizione (definitions), che contiene definizioni di elementi speciali (ad esempio, filtri).

La degradazione lineare può essere definita come degradazione orizzontale, verticale o angolare:

  • Creare un degradazione orizzontale quando y1 e y2 sono uguali e x1 e x2 sono diversi
  • Creare un degradazione verticale quando x1 e x2 sono uguali e y1 e y2 non sono uguali
  • Creare un degradazione angolare quando x1 e x2 sono diversi e y1 e y2 non sono uguali

Esempio 1

Definire un ellisse con una degradazione lineare orizzontale dal giallo al rosso:

Questo è il codice 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>

Prova personalmente

Spiegazione del codice:

  • L'attributo id del tag <linearGradient> definisce il nome unico del gradiente
  • Gli attributi x1, x2, y1, y2 del tag <linearGradient> definiscono la posizione di inizio e fine del gradiente
  • L'intervallo di colori del gradiente può essere composto da due o più colori. Ogni colore è specificato con il tag <stop>
  • L'attributo offset definisce la posizione di inizio e fine del gradiente di colore
  • L'attributo fill collega l'elemento ellisse al gradiente

Esempio 2

Definire un ellisse con una trasformazione lineare verticale dal giallo al rosso:

Questo è il codice 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>

Prova personalmente

Esempio 3

Definire un ellisse e aggiungere testo all'interno dell'ellisse, con una trasformazione lineare orizzontale dal giallo al rosso:

SVG

Questo è il codice 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>

Prova personalmente

Spiegazione del codice:

  • L'elemento <text> viene utilizzato per aggiungere testo