Elemento SVG linearGradient e gradienti lineari

Un gradiente lineare è una transizione fluida da un colore all'altro lungo una linea retta. In SVG si costruisce con due elementi che lavorano insieme: un <linearGradient> che definisce la direzione e il sistema di coordinate della linea, e uno o più figli <stop> che posizionano i colori lungo di essa. Si punta quindi l'attributo fill (o stroke) di una forma al gradiente tramite il suo id, usando fill="url(#myGradient)".

Questa pagina tratta l'elemento <linearGradient>, i suoi figli <stop>, le coordinate x1/x2/y1/y2 che orientano il gradiente, e gli attributi gradientUnits e spreadMethod che controllano come viene mappato e affiancato.

Descrizione dei gradienti SVG

Un gradiente è una sfumatura cromatica uniforme che può essere riutilizzata come riempimento per qualsiasi numero di forme. SVG ha due principali tipi di gradienti:

lineare — i colori si sfumano lungo una linea retta (questa pagina).
radiale — i colori si sfumano verso l'esterno a partire da un punto centrale. Vedi SVG radialGradient.

L'elemento `<linearGradient>`

L'elemento <linearGradient> definisce un gradiente lineare che riempie (o traccia il contorno di) elementi grafici. È una definizione, non una forma visibile, quindi si inserisce all'interno di un blocco <defs>, gli viene assegnato un id e viene referenziato da una forma con fill="url(#id)".

La direzione del gradiente è impostata dal punto di partenza (x1, y1) e dal punto di arrivo (x2, y2). La linea del gradiente va dal punto di partenza al punto di arrivo; i colori vengono interpolati lungo di essa.

I gradienti lineari possono essere orizzontali, verticali o angolari:

Orizzontale — y1 e y2 sono uguali, mentre x1 e x2 differiscono.
Verticale — x1 e x2 sono uguali, mentre y1 e y2 differiscono.
Angolare (diagonale) — entrambe le coppie x e y differiscono.

Informazione

Se si omettono le coordinate, i valori predefiniti SVG sono x1="0%", y1="0%", x2="100%", y2="0%" — un gradiente orizzontale da sinistra a destra.

Pericolo

Non confondere un gradiente lineare SVG con la funzione CSS linear-gradient. I gradienti CSS dipingono elementi HTML tramite background-image, mentre i gradienti SVG dipingono forme SVG tramite fill o stroke.

L'elemento `<stop>`

Ogni <stop> posiziona un singolo colore in un punto lungo la linea del gradiente. Sono necessari almeno due stop per vedere una transizione. Gli stop possono essere stilizzati con attributi di presentazione (stop-color, stop-opacity) o con il CSS equivalente all'interno di un attributo style, come negli esempi seguenti.

Attributo	Descrizione
`offset`	Il punto in cui lo stop si trova lungo la linea del gradiente, come numero `0`–`1` o percentuale `0%`–`100%`. `0%` è il punto di partenza, `100%` è il punto di arrivo.
`stop-color`	Il colore dello stop. Accetta qualsiasi colore CSS (named, `#hex`, `rgb()`, `hsl()`). Il valore predefinito è `black`.
`stop-opacity`	L'opacità del colore dello stop, da `0` (trasparente) a `1` (opaco). Il valore predefinito è `1`.

Esempio dell'elemento `<linearGradient>` per creare un'ellisse con un gradiente lineare orizzontale:

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Esempio dell'elemento `<linearGradient>` per creare un'ellisse con un gradiente lineare verticale:

<!DOCTYPE html>
<html>
  <body>
    <svg height="300" width="400">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Esempio di gradiente lineare angolare (diagonale):

Per impostazione predefinita gradientUnits è objectBoundingBox, quindi le coordinate sono frazioni del bounding box della forma. Usando x1="0" y1="0" x2="1" y2="1" la linea del gradiente va dall'angolo in alto a sinistra all'angolo in basso a destra, producendo una sfumatura diagonale.

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="diagonal" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect x="20" y="20" width="260" height="160" fill="url(#diagonal)" />
    </svg>
  </body>
</html>

L'attributo `gradientUnits`

gradientUnits determina come vengono interpretati x1, y1, x2 e y2:

objectBoundingBox (predefinito) — le coordinate sono relative alla forma da dipingere, dove 0 (o 0%) è un bordo e 1 (o 100%) è il bordo opposto. Il gradiente si adatta automaticamente a ogni forma.
userSpaceOnUse — le coordinate sono posizioni assolute nel sistema di coordinate utente dell'SVG (le stesse unità delle coordinate x/y della forma stessa).

Un errore comune: con userSpaceOnUse, le coordinate in percentuale e 0–1 non seguono più la forma. È necessario fornire coordinate reali (ad esempio x1="20" y1="0" x2="280" y2="0") che si sovrappongano alla forma, altrimenti il riempimento potrebbe apparire piatto (un colore unico) perché la linea del gradiente non la attraversa mai.

L'attributo `spreadMethod`

spreadMethod controlla cosa accade al di fuori del segmento [x1,y1]–[x2,y2] quando la linea del gradiente è più corta della forma. Ha un effetto visibile solo quando il gradiente non copre già l'intera forma.

Valore	Comportamento
`pad` (predefinito)	I colori del primo e dell'ultimo stop si estendono ("riempiono") per coprire l'area rimanente.
`reflect`	Il gradiente si rispecchia avanti e indietro, ripetendosi in direzioni alternate.
`repeat`	Il gradiente si affianca, saltando dall'ultimo stop al primo e ripetendosi.

<!DOCTYPE html>
<html>
  <body>
    <svg height="120" width="300">
      <defs>
        <linearGradient id="repeated" x1="0" y1="0" x2="0.2" y2="0"
                        spreadMethod="repeat">
          <stop offset="0%" stop-color="rgb(28, 135, 201)" />
          <stop offset="100%" stop-color="rgb(128, 0, 128)" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="300" height="120" fill="url(#repeated)" />
    </svg>
  </body>
</html>

Cambia spreadMethod="repeat" in reflect o pad nell'esempio sopra per confrontare i tre comportamenti: repeat produce salti di colore netti, reflect produce un effetto ping-pong uniforme, e pad mostra il gradiente una sola volta seguito da un blocco solido dell'ultimo colore.

Attributi

Valore	Descrizione
gradientUnits	Questo attributo specifica il sistema di coordinate per gli attributi x1, x2, y1, y2. Valori: `userSpaceOnUse`, `objectBoundingBox`.
gradientTransform	Questo attributo aggiunge una trasformazione aggiuntiva al sistema di coordinate del gradiente.
href	Questo attributo specifica un riferimento a un altro elemento `<linearGradient>`.
spreadMethod	Questo attributo specifica il comportamento del gradiente se inizia o termina all'interno dei limiti della forma che lo contiene. Valori: `pad`, `repeat`, `reflect`.
x1	Questo attributo specifica la coordinata x del punto iniziale del vettore gradiente lungo il quale viene tracciato il gradiente lineare.
x2	Questo attributo specifica la coordinata x del punto finale del vettore gradiente lungo il quale viene tracciato il gradiente lineare.
y1	Questo attributo specifica la coordinata y del punto iniziale del vettore gradiente lungo il quale viene tracciato il gradiente lineare.
y2	Questo attributo specifica la coordinata y del punto finale del vettore gradiente lungo il quale viene tracciato il gradiente lineare.

L'elemento SVG <linearGradient> supporta anche gli Attributi globali e gli Attributi evento.

Per le sfumature di colore radiali che si espandono verso l'esterno a partire da un punto centrale anziché lungo una linea, vedi SVG radialGradient.

Esercitazione

Pratica

Quale attributo posiziona un singolo colore in un punto lungo la linea di un gradiente lineare SVG?

L'attributo offset di un elemento stop.L'attributo spreadMethod.L'attributo gradientUnits.L'attributo stop-opacity.

Pratica

Seleziona tutto ciò che si applica: cosa fanno gli attributi x1, y1, x2 e y2 su un linearGradient? (Seleziona tutto ciò che si applica)

Impostano i punti di inizio e fine della linea del gradiente.Regolano il colore del gradiente.Determinano l'orientamento: orizzontale, verticale o diagonale.Definiscono la durata di un'animazione SVG.

Descrizione dei gradienti SVG

L'elemento <linearGradient>

L'elemento <stop>

Esempio dell'elemento <linearGradient> per creare un'ellisse con un gradiente lineare orizzontale:

Esempio dell'elemento <linearGradient> per creare un'ellisse con un gradiente lineare verticale: