Gradienti radiali SVG: sposta la luce con fx e fy

Per spostare il punto luce di un gradiente radiale SVG senza muovere la grafica, imposta fx e fy sul relativo <radialGradient>. Mantieni invariati cx, cy, r e il tracciato. Con fr="0", il punto focale avvia la progressione cromatica; il cerchio finale ne controlla ancora l'estensione esterna. Se il punto luce appare allungato, controlla gradientUnits e il riquadro di delimitazione della forma prima di modificare il contorno.

Questa procedura usa un emblema esagonale largo e originale, con un'apertura. Confrontiamo punti luce centrati e decentrati, poi due definizioni di sfumatura scelte: un'ellisse relativa all'oggetto e un cerchio nello spazio utente. L'SVG è scritto direttamente come codice. Nessun servizio di ricalco o editor ha prodotto il campione.

Separa il fuoco dal cerchio finale

Il gradiente radiale ha un cerchio iniziale e uno finale. In questo esempio, fr="0" riduce il cerchio iniziale a un punto. fx e fy posizionano quel punto; cx, cy e r definiscono il cerchio finale. Se non imposti le coordinate focali, assumono per impostazione predefinita le coordinate corrispondenti del centro. La documentazione di radialGradient su MDN descrive questi attributi e valori predefiniti.

Considera queste modifiche come operazioni diverse:

La coordinata focale orizzontale è fx; quella verticale è fy. Cambiarle entrambe sposta il punto iniziale in diagonale. Non modifica i punti del tracciato e non sposta la sua apertura.

Copia un SVG completo con punto luce decentrato

Salvalo come emblem.svg e aprilo in un browser. Non dipende da immagini esterne o fogli di stile.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

Per creare il controllo centrato, cambia soltanto fx=".22" fy=".18" in fx=".5" fy=".5". Lascia invariati gli altri attributi ed entrambi i contorni in d.

Il contorno esterno va da x=0 a 160 e da y=20 a 100. Il secondo contorno definisce l'apertura. fill-rule="evenodd" mantiene l'apertura non dipinta; spostare il gradiente non la riempie. La documentazione di fill-rule su MDN spiega la regola degli attraversamenti usata da questo tracciato composto.

Il fuoco centrato si trova nell'apertura, perciò il punto più luminoso in sé è invisibile. Sull'anello vedi comunque la progressione cromatica circostante. Il fuoco decentrato cade sulla fascia piena in alto a sinistra, dove lo stop più chiaro diventa visibile. Questa distinzione aiuta quando una modifica alle coordinate sembra avere poco effetto: il fuoco potrebbe trovarsi dietro una parte trasparente del marchio.

Perché l'emblema largo assume una sfumatura ellittica

Con gradientUnits="objectBoundingBox", le coordinate descrivono i limiti dell'oggetto dipinto. I limiti del nostro emblema sono 160 × 80, anche se la sua tela SVG è 200 × 120. Un cerchio normalizzato, mappato attraverso quel riquadro non quadrato, diventa un'ellisse. La documentazione di gradientUnits su MDN descrive questa mappatura.

Qui, cx=".5" cy=".5" corrisponde a (80, 60). Il raggio .6 corrisponde a raggi orizzontale e verticale di 96 e 48. Il fuoco decentrato corrisponde a:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Per un'area finale circolare in questo SVG senza trasformazioni, sostituisci gli attributi delle coordinate del gradiente con:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Il relativo controllo centrato usa fx="80" fy="60". Il raggio ora è 64 unità utente in entrambe le direzioni. È un'area finale scelta diversa dall'ellisse 96 × 48. Abbiamo cambiato la definizione delle coordinate e il raggio fisico; questo confronto non isola il solo cambio di unità. All'interno di ogni coppia centrata/decentrata, cambiano soltanto le coordinate focali.

Usa una sfumatura relativa all'oggetto quando deve seguire le proporzioni di ogni forma. Usa numeri espliciti nello spazio utente quando posizione ed estensione circolare appartengono alle coordinate della grafica. Per una sfumatura condivisa tra tracciati separati di un logo, vedi le unità dei gradienti SVG.

Che cosa ha mostrato il confronto originale nel browser

Abbiamo aperto tutti e quattro gli SVG originali in Chrome e visualizzato ciascuno a 100 × 60 e 300 × 180 pixel CSS. La versione più grande rendeva più facile esaminare il punto luce in alto a sinistra. Lo stesso decentramento restava visibile alla dimensione più piccola, mentre l'apertura rimaneva trasparente in ogni campione.

Il rapporto della sorgente del browser ha trovato un tracciato, nessun elemento immagine, valori d identici e gli stessi limiti del tracciato 160 × 80 in tutti e quattro i file. Letture separate dei pixel alle dimensioni della tela sorgente hanno confermato il cambiamento della sfumatura:

Il campione in alto a sinistra è alla coordinata della grafica (35, 30); quello dell'apertura è a (80, 60). Queste osservazioni descrivono questa sorgente e questa sessione del browser. Non dimostrano l'uscita di un altro renderer né il comportamento di importazione di un editor.

Fuoco e limiti della sfumatura

Mantieni il fuoco all'interno mentre regoli il marchio

Parti da un fuoco interno e da fr="0". In coordinate normalizzate, la distanza del fuoco decentrato dal centro è circa .425, inferiore al nostro raggio .6. Nella versione nello spazio utente, la distanza è circa 51.6, inferiore a 64. Entrambe le scelte mantengono il punto iniziale dentro il rispettivo cerchio finale nel sistema di coordinate in cui quel cerchio è definito.

Le spiegazioni meno recenti possono affermare che un fuoco esterno viene sempre vincolato al cerchio finale. SVG 2 consente al cerchio iniziale di stare all'esterno e definisce un comportamento diverso, comprese aree non dipinte fuori dal cono del gradiente. La specifica SVG 2 dei gradienti radiali spiega questo cambiamento. Questo esempio usa punti interni; non abbiamo provato il rendering con fuoco esterno in diversi browser.

Mantieni spreadMethod="pad" mentre controlli la posizione. Oltre l'estensione del gradiente, pad usa il colore dell'ultimo stop; repeat e reflect introducono ripetizioni che possono rendere meno chiaro il confronto del fuoco. La documentazione di spreadMethod su MDN definisce queste scelte.

Prima della consegna, controlla queste tre cose nell'ambiente che visualizzerà l'SVG:

1. Il punto luce si trova sulla fascia piena prevista alle dimensioni effettive di visualizzazione.
2. L'apertura rimane trasparente e i dati del tracciato corrispondono ancora al master.
3. Il cerchio o l'ellisse scelti sono adatti alle proporzioni del marchio.

Se i colori cambiano dopo l'esportazione, esamina la sfumatura e il contesto di consegna con perché i colori SVG cambiano dopo l'esportazione. Spostare il punto focale modifica la posizione, quindi cambiare contemporaneamente i colori degli stop rende il confronto più difficile da leggere.

Separa il recupero della geometria dal progetto della sfumatura

Conserva un master piatto di questo emblema usando lo stesso tracciato con un riempimento uniforme e mantenendo la sua apertura. Salva separatamente la versione con gradiente per la grafica web che ne ha bisogno. Un gradiente è una colorazione assegnata a un contorno; queste coordinate focali non definiscono tracciati di taglio aggiuntivi.

Se il logo iniziale esiste solo come PNG o JPG, il vettorizzatore di loghi di PerfectVector può recuperare geometria vettoriale da esaminare prima di ricostruire questa sfumatura. Controlla il contorno esterno e l'apertura, poi imposta le coordinate del gradiente nel tuo flusso SVG. Un punto luce raster non conserva i suoi fx, fy o raggio originali come parametri di progetto recuperabili. Se hai già contorni vettoriali puliti, modificane direttamente il gradiente. La guida alla vettorizzazione dei gradienti tratta la scelta del passaggio da raster a vettoriale.

Domande frequenti

Come sposto il punto luce di un gradiente radiale SVG? Imposta coordinate fx e fy esplicite su radialGradient. Mantieni fissi cx, cy, r, gli stop e il tracciato mentre confronti la modifica. Con fr uguale a zero, quelle coordinate focali posizionano il punto iniziale della progressione cromatica.

Perché un gradiente radiale appare ellittico nel mio SVG? Con le unità objectBoundingBox, un cerchio normalizzato viene mappato attraverso i limiti dell'oggetto dipinto. Limiti non quadrati producono un'ellisse. In un SVG senza trasformazioni, coordinate userSpaceOnUse esplicite possono definire un'area circolare nelle unità della grafica.

Spostare il punto focale riempie l'apertura di un logo? No. Il tracciato composto e la relativa regola di riempimento determinano l'apertura. Questo esempio usa evenodd e conserva lo stesso tracciato in ogni campione; la sua apertura rimane trasparente quando il fuoco si sposta.

La vettorizzazione può recuperare le coordinate focali del gradiente originale? Un'immagine raster non conserva i parametri originali del gradiente SVG. Recupera ed esamina i contorni se necessario, poi ricostruisci la sfumatura e controlla il punto luce nell'ambiente di visualizzazione previsto.

Fonti

1. MDN radialGradient — Attributi dei cerchi iniziale e finale e relativi valori predefiniti.
2. MDN fx — Significato della coordinata focale orizzontale.
3. MDN fy — Significato della coordinata focale verticale.
4. MDN fill-rule — Comportamento del riempimento pari-dispari per l'apertura.
5. MDN gradientUnits — Limiti dell'oggetto, spazio utente e mappatura ellittica.
6. Gradienti radiali SVG 2 — Geometria del cerchio iniziale e modifica della specifica per il fuoco esterno.
7. MDN spreadMethod — Comportamento di pad, repeat e reflect.