Gradiente SVG lungo un tracciato: controlla la curva

Un normale linearGradient SVG non misura l’avanzamento lungo un tracciato curvo. Dipinge secondo un vettore di gradiente in un sistema di coordinate. Se un nastro torna indietro, due punti nella stessa posizione lungo quel vettore possono ricevere lo stesso colore pur essendo lontani lungo il nastro.

Per un disegno statico che richiede una progressione cromatica attorno a una curva, puoi creare sezioni colorate separate. Questo offre controllo sulla sequenza, ma aggiunge geometria e confini di colore visibili. Il nostro esempio originale confronta un gradiente orizzontale con otto fasce deliberate sullo stesso percorso disegnato. Entrambi i file contengono tracciati e nessuna immagine incorporata.

Controlla dove il colore si ripete

La specifica SVG2 dei paint server definisce i gradienti lineari attraverso un vettore e i suoi punti di colore. Descrive i gradienti radiali tramite la loro geometria circolare. Nessuna definizione trasforma un tracciato arbitrario in un asse cromatico basato sulla distanza lungo il percorso.

Il nostro nastro parte in alto a sinistra, va a destra, curva lungo un semicerchio e ritorna in basso a sinistra. Un gradiente orizzontale rende arancioni entrambe le estremità sinistre e viola la curva destra. È un gradiente a coordinate valido; risponde semplicemente a una domanda di design diversa da «cambia colore dall’inizio alla fine di questo percorso».

Il tutorial MDN sui gradienti spiega il modello di estremi e punti di colore. Aggiungere più punti cambia quella sequenza basata sulle coordinate. Non fa seguire la curva alla pittura.

Colore a coordinate e fasce create

Conserva un gradiente ordinario come controllo

Salva questo file completo come coordinate.svg. Il tracciato usa un contorno di 24 unità dentro un viewBox 200×160. Le porzioni dritte e il semicerchio destro formano un’unica linea centrale modificabile.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

Usiamo gradientUnits="userSpaceOnUse" per rendere espliciti gli estremi del gradiente nel sistema di coordinate sorgente. Passare alle coordinate del riquadro di delimitazione cambierebbe il modo in cui sono espressi gli estremi; non introdurrebbe pittura basata sulla distanza del tracciato. Vedi il riferimento gradientUnits e la nostra guida alle coordinate dei gradienti.

L’intero percorso è un elemento path. Conserva questa versione semplice come master geometrico anche se decidi di consegnare un trattamento cromatico più elaborato.

Crea una sequenza a gradini attorno alla curva

Salva quanto segue come bands.svg. Divide la porzione dritta superiore in due pezzi, il semicerchio in quattro archi e la porzione dritta di ritorno in due pezzi. I colori seguono l’ordine del percorso, dall’arancione iniziale in alto al viola finale in basso.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

Sono otto fasce scelte manualmente con segmenti di lunghezze diverse. Non sono un calcolo di incrementi cromatici uniformi per unità di lunghezza e non creano sfumature continue. Gli estremi degli archi con decimali arrotondati approssimano il percorso originale; l’esempio non afferma che i contorni siano identici al pixel.

Il riferimento path documenta l’elemento e i suoi dati. Ogni sezione resta una linea centrale con contorno, non un riempimento chiuso con sagoma esterna. Se la destinazione richiede forme chiuse, prepara e controlla quella geometria separatamente invece di trattare questi segmenti come contorni di taglio.

Usiamo stroke-linecap="butt" affinché i pezzi adiacenti non si estendano oltre gli estremi. Estremità arrotondate su ogni sezione interna si sovrapporrebbero ai colori vicini. Anche le transizioni da retta ad arco richiedono direzioni corrispondenti; la nostra guida alle giunzioni morbide tratta separatamente la continuità geometrica.

Confronta due dimensioni e due posizioni

Abbiamo renderizzato entrambi i file originali in Chrome a 200×160 e 400×320 pixel CSS. Il browser ha decodificato ogni SVG e lo ha dipinto su un canvas con dimensioni interne corrispondenti a quelle del test. Il rapporto di pixel del dispositivo era 2; questi campioni registrati provengono dal buffer del canvas, non dal conteggio dei pixel del dispositivo in una schermata.

Alle coordinate sorgente (60,30) e (60,130), i punti si trovano su porzioni dritte diverse del percorso. Condividono la stessa coordinata orizzontale, quindi il gradiente orizzontale assegna loro lo stesso colore campionato.

Le coppie di campioni erano uguali alle due dimensioni testate, con alfa 255 negli interni dipinti. L’area aperta alla sorgente (100,80) aveva alfa zero in tutti e sei i casi. Questo verifica i file creati in questo browser; non certifica ogni renderer o tutti i pixel dei confini.

Il rendering a fasce mantiene cambi di colore discreti visibili a entrambe le dimensioni. Controlla le giunzioni alla dimensione di consegna, soprattutto dopo esportazione o incorporamento. Pezzi separati possono mostrare fessure per antialiasing, arrotondamenti o modifiche successive. Aumentare il numero di sezioni può ridurre l’ampiezza di ogni salto cromatico, ma crea anche più tracciati e più confini da mantenere.

Scegli il trattamento prima di espandere la grafica

Ruotare un gradiente lineare ne cambia la direzione. Ripeterlo cambia l’estensione dei colori. Nessuna operazione lo fa curvare continuamente con questa linea centrale che ritorna. Un gradiente radiale può adattarsi a una composizione circolare, ma ha una propria geometria di pittura, non è una soluzione generale basata sulla distanza del percorso.

Se modifichi la curva in seguito, aggiorna insieme le sezioni. Conserva un master piatto per confrontare il percorso desiderato e mantieni separata la copia del trattamento cromatico. La nostra guida ai tracciati relativi può aiutare a leggere o spostare i comandi sottostanti.

Se la grafica iniziale è un PNG o JPG e ti servono contorni modificabili, converti la sorgente con PerfectVector, esamina forma e aree aperte recuperate e conserva un master SVG pulito. Scegli o ricostruisci il trattamento cromatico dopo aver controllato la geometria. La vettorializzazione non garantisce il recupero esatto delle sfumature continue e non inventa una funzione nativa di gradiente lungo un tracciato. Un SVG pulito esistente richiede modifica diretta di pittura e geometria; la guida alla vettorializzazione delle immagini spiega quando aiuta convertire il raster.

Domande frequenti

Posso far seguire a linearGradient qualsiasi contorno curvo? La normale definizione di linearGradient non offre un’impostazione basata sulla distanza del tracciato. Il vettore di coordinate controlla la pittura. L’esempio a gradini assegna colori separati a sezioni separate del percorso.

Più punti di gradiente correggeranno i colori che ritornano? Più punti possono affinare le transizioni lungo il vettore di gradiente. I punti nella stessa posizione lungo quel vettore condividono ancora la stessa pittura basata sulle coordinate.

Il file a fasce contiene un’immagine raster? No. Il nostro esempio creato contiene otto elementi tracciato e nessun elemento immagine. Contiene anche passaggi cromatici visibili anziché un gradiente continuo basato sulla distanza del percorso.

Devo sostituire ogni gradiente con tracciati separati? Usa il gradiente a coordinate più semplice quando corrisponde al disegno. Sezioni separate sono utili quando progressione e costi di modifica sono accettabili; controlla fessure e rendering nella destinazione prima della consegna.

Fonti

1. W3C — Paint server SVG2 — Vettori di gradiente, punti di colore e pittura basata sulle coordinate.
2. MDN — Gradienti in SVG — Costruzione di gradienti lineari e radiali.
3. MDN — gradientUnits — Sistemi di coordinate dello spazio utente e del riquadro di delimitazione.
4. MDN — path — Elementi e dati dei tracciati ispezionabili.
5. MDN — stroke-linecap — Comportamento degli estremi dritti e arrotondati dei contorni.