Gradiente radiale SVG

SVG Trasformazione Radiale - <radialGradient>

<radialGradient> L'elemento viene utilizzato per definire la trasformazione radiale (trasformazione radiante).

<radialGradient> L'elemento deve essere nesting inside <defs> all'interno del tag.<defs> L'elemento è l'abbreviazione di definizione (definitions) e contiene definizioni di elementi speciali (ad esempio, filtri).

Esempio 1

Definire un'ellisse con una trasformazione radiale dal bianco al blu:

Questo è il codice SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Prova da solo

Spiegazione del codice:

  • L'attributo id del tag <radialGradient> definisce il nome unico della trasformazione
  • Gli attributi cx, cy e r definiscono il cerchio esterno, mentre fx e fy definiscono il cerchio interno
  • L'intervallo di colori della trasformazione 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 colore della trasformazione
  • L'attributo fill collega l'elemento ellisse alla trasformazione

Esempio 2

Definire un'ellisse con una trasformazione radiale dal bianco al blu:

Questo è il codice SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Prova da solo