Gradiente Radiale SVG (radialGradient)

Descrizione dell'elemento `<radialGradient>`

Un gradiente radiale fa transitare i colori verso l'esterno a partire da un punto centrale, in un pattern circolare, come i cerchi che si formano sull'acqua quando si lancia un sasso. L'elemento <radialGradient> specifica tale gradiente, che può essere applicato al riempimento e al tratto di elementi grafici.

Questa pagina illustra cosa distingue un gradiente radiale da uno lineare, come definire i color stop e come gli attributi gradientUnits e spreadMethod controllano il risultato. Se sei alle prime armi con SVG, inizia dall'introduzione a SVG.

L'elemento <radialGradient> deve essere annidato all'interno di un elemento <defs>, che sta per definitions (definizioni). L'elemento <defs> contiene definizioni riutilizzabili (come i gradienti) che non vengono disegnate autonomamente — vengono referenziate da altri elementi. Il gradiente si applica assegnando un id al <radialGradient> e referenziandolo con fill="url(#id)" (oppure stroke="url(#id)").

Come viene definito un gradiente radiale

Questo è ciò che distingue il gradiente radiale da quello lineare. Un gradiente radiale è definito da due cerchi:

Un cerchio finale, impostato da cx, cy (il suo centro) e r (il suo raggio). Il gradiente termina — raggiunge il suo ultimo color stop — al bordo di questo cerchio.
Un punto focale, impostato da fx, fy. Questo è il punto da cui il gradiente inizia (il suo primo color stop). Il gradiente si irradia verso l'esterno dal punto focale fino a raggiungere il cerchio finale.

Quando fx/fy coincidono con cx/cy, il gradiente è perfettamente concentrico. Spostando il punto focale dal centro, il gradiente appare decentrato — utile per simulare una sorgente luminosa o il riflesso su una sfera 3D. Se si omettono fx/fy, assumono per impostazione predefinita i valori di cx/cy.

Color stop

I colori di un gradiente sono descritti da uno o più elementi <stop> annidati all'interno del <radialGradient>. Ogni stop ha questi attributi:

offset — la posizione dello stop lungo il gradiente, da 0% (il punto focale) a 100% (il bordo del cerchio finale). È possibile utilizzare anche un numero da 0 a 1.
stop-color — il colore in quell'offset (qualsiasi valore di colore CSS).
stop-opacity — l'opacità in quell'offset, da 0 (trasparente) a 1 (opaco).

Pericolo

Non confondere un gradiente radiale SVG con la funzione CSS radial-gradient. I gradienti CSS possono essere applicati allo sfondo di qualsiasi elemento, mentre i gradienti SVG si applicano esclusivamente agli elementi SVG.

Esempio dell'elemento SVG `<radialGradient>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Esempio con punto focale decentrato

Spostando fx/fy rispetto a cx/cy si cambia il punto di partenza del gradiente. In questo caso il punto focale è spostato verso l'alto a sinistra del cerchio, il che fa sembrare la forma una sfera illuminata — il riflesso è vicino al punto focale e il colore si intensifica verso il cerchio finale:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Controllo delle unità con `gradientUnits`

L'attributo gradientUnits stabilisce il sistema di coordinate in cui vengono misurati cx, cy, r, fx e fy:

objectBoundingBox (il valore predefinito) — le coordinate sono relative al bounding box dell'elemento da riempire. Si utilizzano percentuali o frazioni (da 0 a 1), dove 50% indica il centro della forma. Il gradiente si scala automaticamente con la forma.
userSpaceOnUse — le coordinate utilizzano il sistema di coordinate utente del canvas SVG (le stesse unità delle forme). Si usano valori assoluti come cx="200". È utile quando un gradiente deve essere condiviso da più forme in una posizione fissa.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Controllo dei bordi con `spreadMethod`

spreadMethod definisce cosa accade oltre il cerchio finale quando il gradiente non copre l'intera forma (ad esempio, quando r è più piccolo della forma, o il punto focale è decentrato):

pad (il valore predefinito) — l'ultimo color stop continua come riempimento solido fino ai bordi.
reflect — il gradiente viene specchiato, ripetendosi verso l'esterno come ...bordo → centro → bordo → centro...
repeat — il gradiente riparte dall'inizio ogni volta, ripetendosi verso l'esterno come ...centro → bordo, centro → bordo...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Attributi

Attributo	Descrizione
cx	Specifica la coordinata x del cerchio finale del gradiente.
cy	Specifica la coordinata y del cerchio finale del gradiente.
r	Specifica il raggio del cerchio finale del gradiente.
fx	Specifica la coordinata x del cerchio iniziale del gradiente.
fy	Specifica la coordinata y del cerchio iniziale del gradiente.
gradientUnits	Specifica il sistema di coordinate per `cx`, `cy`, `r`, `fx` e `fy`. Valori: `objectBoundingBox` (predefinito) o `userSpaceOnUse`.
gradientTransform	Applica una trasformazione aggiuntiva al sistema di coordinate del gradiente.
href	Un riferimento URL a un elemento "radialGradient" o "linearGradient" diverso.
spreadMethod	Specifica come il gradiente si comporta quando inizia o termina all'interno dei limiti degli oggetti che lo contengono. Valori: `pad`, `repeat` o `reflect`.

L'elemento SVG <radialGradient> supporta anche gli Attributi Globali e gli Attributi Evento.

Capitoli correlati

Gradiente lineare SVG — l'altro tipo di gradiente, definito da una direzione anziché da due cerchi.
Introduzione a SVG — le basi per lavorare con SVG in HTML.
Riferimento SVG — un elenco completo di elementi e attributi SVG.

Esercizio

Pratica

Quali attributi definiscono il punto focale (di partenza) di un gradiente radiale SVG?

fx, fycx, cyx1, y1dx, dy

Descrizione dell'elemento <radialGradient>