# Gradienti SVG: lineari, radiali, tratti, testo e maschere [Canonical HTML page](https://gradiently.design/it/guide/svg-gradients) L’SVG ha un suo sistema di gradienti, più vecchio dei gradienti CSS e capace di cose che loro non sanno fare: colorare un tratto, riempire una parola, condividere un gradiente tra molte forme e sfumare qualsiasi cosa con una maschera. ## The short version - Un gradiente SVG si definisce una volta come elemento linearGradient o radialGradient con figli stop, gli si dà un id e si applica impostando fill o stroke su url(#id). - Per impostazione predefinita le coordinate di un gradiente SVG usano le unità objectBoundingBox, in cui 0 e 1 sono i bordi della forma che viene dipinta. - gradientUnits="userSpaceOnUse" colloca il gradiente nelle coordinate del disegno stesso, il che permette a un gradiente di estendersi su più forme e risolve i gradienti sulle linee perfettamente dritte. - spreadMethod decide cosa succede oltre le estremità del gradiente: pad mantiene i colori finali, reflect rispecchia la sfumatura e repeat la fa ripartire. - Una maschera SVG usa la luminosità, quindi un gradiente dal bianco al nero dentro una maschera sfuma qualsiasi cosa a cui venga applicato. Un **gradiente SVG** è una pittura che definisci una volta e applichi a qualsiasi forma, linea o testo di un SVG. Scrivi un elemento `` o `` dentro ``, gli dai figli `` per i colori e un `id`, poi imposti il `fill` o lo `stroke` di una forma su `url(#id)`. A differenza di uno sfondo CSS, può colorare un tratto o una singola parola, e si ridimensiona con il disegno. ```html ``` Un gradiente diagonale su un rettangolo arrotondato. x1, y1, x2 e y2 tracciano la linea del gradiente dall’alto a sinistra al basso a destra. La stessa sfumatura, in CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` L’SVG qui sopra e questo gradiente CSS coincidono su un quadrato. Su un rettangolo, la versione SVG si allunga con la forma; leggi gradientUnits più avanti. ## linearGradient e i suoi stop `x1`, `y1`, `x2` e `y2` fissano l’inizio e la fine della linea del gradiente. Ogni `` accetta un `offset` da 0 a 1 (o da 0% a 100%), uno `stop-color` e uno `stop-opacity` facoltativo. `stop-color` è anche una proprietà CSS, quindi puoi dare un tema ai gradienti da un foglio di stile, per esempio `stop { stop-color: var(--accent); }`. | Attributo | Predefinito | Cosa fa | | --- | --- | --- | | `x1 y1 x2 y2` | `0 0 1 0`, da sinistra a destra | Punti di inizio e fine della linea del gradiente | | `gradientUnits` | `objectBoundingBox` | Se le coordinate sono relative alla forma o al disegno | | `spreadMethod` | `pad` | Cosa succede oltre le estremità: `pad`, `reflect` o `repeat` | | `gradientTransform` | nessuno | Ruota, scala o inclina il gradiente, per esempio `rotate(30)` | | `href` | nessuno | Eredita stop e impostazioni da un altro gradiente | Gli attributi principali di linearGradient. radialGradient li condivide tutti tranne la prima riga. `href` evita le ripetizioni. Definisci gli stop una volta in un gradiente di base, poi crea varianti che puntano a esso e cambiano solo direzione o unità. Il [riferimento MDN su linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) copre ogni attributo. ## radialGradient: centro, raggio e punto focale Un gradiente radiale accetta un centro (`cx`, `cy`) e un raggio (`r`), tutti predefiniti a 0.5, quindi riempie la forma dal centro. Ha anche qualcosa che al CSS manca: un punto focale separato (`fx`, `fy`) da cui parte il primo colore. Spostare il punto focale fuori centro fa sembrare una sfera illuminata da un lato. ```html ``` Un punto focale in alto a sinistra trasforma un cerchio piatto in una sfera lucida. Sfera illuminata, simulata in CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` Il CSS può spostare il centro ma non separare centro e fuoco, quindi questa è solo un’approssimazione della sfera SVG. Confronta con i [gradienti radiali CSS](https://gradiently.design/it/guide/css-radial-gradient). ## gradientUnits: objectBoundingBox o userSpaceOnUse Con l’impostazione predefinita `objectBoundingBox`, 0 e 1 indicano i bordi della forma che viene dipinta, quindi ogni forma riceve l’intero gradiente, stirato per adattarsi. Con `userSpaceOnUse`, le coordinate sono nelle unità dell’SVG stesso, quindi il gradiente resta fermo e le forme mostrano la parte che coprono. È così che una fila di barre può condividere un unico gradiente continuo. ### objectBoundingBox - Coordinate da 0 a 1 su ogni forma - Ogni forma mostra l’intero gradiente - Il gradiente si allunga con le proporzioni della forma - Non funziona su una linea perfettamente orizzontale o verticale ### userSpaceOnUse - Coordinate nelle unità del disegno stesso - Le forme mostrano la loro porzione di un unico gradiente - Gli angoli restano fedeli qualunque sia la forma - Funziona su linee dritte e tratti sottili > **La linea dritta invisibile** Una `` orizzontale ha un riquadro di delimitazione alto zero, e le unità del riquadro non si possono calcolare da zero, quindi un tratto con gradiente predefinito non mostra nulla. Imposta `gradientUnits="userSpaceOnUse"` e dai coordinate reali. ## Gradienti su tratti e testo `stroke="url(#id)"` dipinge i contorni, ed è così che si disegnano icone con gradiente, anelli di avanzamento e linee dei grafici. Su ``, `fill="url(#id)"` colora le lettere e le parole restano selezionabili e ricercabili. Aggiungi un colore piatto dopo l’URL, come `fill="url(#dusk) #7c3aed"`, e verrà usato se il gradiente non si trova. ```html ``` Un solo gradiente in unità del disegno, condiviso da una curva e da una parola. Entrambe vanno dal ciano al viola sulla stessa estensione orizzontale. Per le scritte con gradiente in HTML invece che in SVG, il [testo con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text) di solito è più semplice. Scegli il testo SVG quando le parole fanno parte di un’illustrazione o di un logo, o devono seguire un tracciato. ## spreadMethod: pad, reflect e repeat Quando la linea del gradiente è più corta della forma, `spreadMethod` decide cosa riempie il resto. `pad` mantiene i colori finali, `reflect` rispecchia la sfumatura avanti e indietro e `repeat` la fa ricominciare con un bordo netto. Qui ogni gradiente va dal 30% al 70% della larghezza. - pad: `linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` - reflect: `repeating-linear-gradient(90deg, #fde68a -10%, #0f766e 30%, #fde68a 70%)` - repeat: `repeating-linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` Dal verde acqua alla sabbia con i tre metodi di estensione, riprodotti in CSS così puoi confrontarli fianco a fianco. ## Sfumare con le maschere SVG Una maschera usa la luminosità: le aree bianche mostrano ciò che è mascherato, quelle nere lo nascondono e i grigi stanno nel mezzo. Quindi un gradiente dal bianco al nero dentro una `` sfuma dolcemente nel nulla qualsiasi forma o immagine, ed è così che si ammorbidisce il bordo di una foto o si fa svanire l’inizio della linea di un grafico. ```html ``` La foto è completamente visibile in alto e svanisce nel suo 60% inferiore. Per gli elementi HTML, `mask-image: linear-gradient(#000 40%, transparent)` in CSS fa lo stesso lavoro, usando l’alfa invece della luminosità. La tecnica della maschera alimenta anche i [bordi con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-border) trasparenti. ### Da evitare - Riusare lo stesso `id` di gradiente in due SVG inline nella stessa pagina - Nascondere uno sprite di definizioni di gradienti con `display: none` - Unità predefinite sulle linee dritte - Gradienti scuri, lunghissimi e morbidi senza texture ### Da fare - Id unici, o un unico sprite di definizioni condiviso - Nascondere gli sprite con larghezza e altezza zero - `userSpaceOnUse` per tratti e gradienti condivisi - Aggiungere grana alle grandi dissolvenze, leggi [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) ## FAQ ### Come aggiungo un gradiente a un SVG? Definisci un `` o un `` con figli `` e un `id` dentro ``, poi imposta il `fill` o lo `stroke` di una forma su `url(#id)`. ### Perché il mio tratto SVG con gradiente non si vede su una linea? Una linea dritta orizzontale o verticale ha un riquadro di delimitazione di dimensione zero, quindi le unità predefinite `objectBoundingBox` non funzionano. Usa `gradientUnits="userSpaceOnUse"` con coordinate reali. ### Come ruoto un gradiente SVG? Cambia `x1`, `y1`, `x2` e `y2`, oppure aggiungi `gradientTransform="rotate(45 0.5 0.5)"` per ruotarlo attorno al centro del riquadro di delimitazione. ### Posso cambiare i colori di un gradiente SVG con il CSS? Sì. `stop-color` e `stop-opacity` sono proprietà CSS, quindi regole come `stop { stop-color: var(--accent); }` funzionano sugli SVG inline. ### Perché il mio gradiente SVG è sparito quando ho nascosto l’SVG? Le definizioni dentro un SVG con `display: none` possono non essere rese. Nascondi lo sprite con larghezza e altezza zero, o con il posizionamento assoluto.