In breve
- 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.
In questa pagina
Un gradiente SVG è una pittura che definisci una volta e applichi a qualsiasi forma, linea o testo di un SVG. Scrivi un elemento <linearGradient> o <radialGradient> dentro <defs>, gli dai figli <stop> 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.
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="dusk" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1e1b4b" />
<stop offset="0.55" stop-color="#7c3aed" />
<stop offset="1" stop-color="#f472b6" />
</linearGradient>
</defs>
<rect width="200" height="120" rx="16" fill="url(#dusk)" />
</svg>linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)linearGradient e i suoi stop
x1, y1, x2 e y2 fissano l’inizio e la fine della linea del gradiente. Ogni <stop> 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 |
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 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.
<radialGradient id="orb" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.28">
<stop offset="0" stop-color="#e0f2fe" />
<stop offset="0.45" stop-color="#0ea5e9" />
<stop offset="1" stop-color="#082f49" />
</radialGradient>
<circle cx="60" cy="60" r="50" fill="url(#orb)" />radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)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
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 <text>, 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.
<svg viewBox="0 0 320 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#22d3ee" />
<stop offset="1" stop-color="#a855f7" />
</linearGradient>
</defs>
<path d="M20 90 C 90 20, 160 110, 300 30" fill="none" stroke="url(#line)" stroke-width="6" stroke-linecap="round" />
<text x="20" y="115" font-size="20" font-weight="700" fill="url(#line) #7c3aed">Growth</text>
</svg>Per le scritte con gradiente in HTML invece che in SVG, il testo con gradiente in CSS 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.
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 <mask> 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.
<defs>
<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0.4" stop-color="#fff" />
<stop offset="1" stop-color="#000" />
</linearGradient>
<mask id="soft-bottom">
<rect width="100%" height="100%" fill="url(#fade)" />
</mask>
</defs>
<image href="photo.jpg" width="100%" height="100%" mask="url(#soft-bottom)" />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 trasparenti.
Da evitare
- Riusare lo stesso
iddi 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
userSpaceOnUseper tratti e gradienti condivisi- Aggiungere grana alle grandi dissolvenze, leggi texture di rumore in CSS
Le domande più frequenti
Come aggiungo un gradiente a un SVG?
Definisci un <linearGradient> o un <radialGradient> con figli <stop> e un id dentro <defs>, 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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
