SVG: definizione e uso di gradienti

    <svg fill="none" stroke-width="5">
    <defs>
        <radialGradient id="sole">
            <stop offset="0%" stop-color="yellow" />
            <stop offset="100%" stop-color="red" />
        </radialGradient>
    </defs>    
    <polygon fill="url(#sole)" points="70,10 41,100 118,45 22,45 99,100" />
    <polyline stroke="url(#sole)" points="30,125 60,135 80,115 110,125" />
</svg>   
    <svg fill="none" stroke-width="5">
    <defs>
        <radialGradient id="sole">
            <stop offset="0%" stop-color="yellow" />
            <stop offset="100%" stop-color="red" />
        </radialGradient>
    </defs>    
    <polygon fill="url(#sole)" points="70,10 41,100 118,45 22,45 99,100" />
    <polyline stroke="url(#sole)" points="30,125 60,135 80,115 110,125" />
</svg>

  <defs> .... </defs>

Definisce elementi che non vengono visualizzati ma a cui gli altri elementi possono fare riferimento.

  <radialGradient id="sole"> .... </radialGradient>

Definisce un gradiente radiale identificabile con il nome sole.

  <stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />

Definiscono i colori di riferimento per il gradiente, impostando il giallo come inizio (0%) e il rosso come fine (100%).


  fill="url(#sole)"
stroke="url(#sole)"

Imposta il riempimento o il contorno con il gradiente definito con l’identificatore sole.

Aggiungere un terzo colore centrale (50%) alla definizione del gradiente.

linearGradient
radialGradient