Flag degli archi SVG: la curva giusta con A

I due flag in un comando SVG A scelgono quale arco collega il punto iniziale a quello finale. Imposta large-arc-flag su 0 per il percorso più breve o su 1 per quello più lungo. Imposta sweep-flag su 0 o 1 per scegliere la direzione attorno all'ellisse. Mantieni fissi gli estremi e i raggi, cambia soltanto queste due cifre e puoi vedere tutte e quattro le possibilità. La specifica dei tracciati SVG 2 definisce questa scelta tra quattro archi.

È utile quando il bordo curvo di un logo, l'anello di un distintivo o un ornamento d'interfaccia curva nel verso sbagliato dopo una modifica al codice. Se la sorgente è un PNG, la vettorializzazione può prima fornire forme modificabili; il comando A è una modifica geometrica separata e deliberata.

Leggi i sette valori dopo A

Un comando di arco assoluto ha questo ordine:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx e ry sono i raggi dell'ellisse. x-axis-rotation ruota quell'ellisse nel sistema di coordinate attuale. I due flag sono ciascuno 0 o 1. Infine, x y è il punto finale. L'inizio è il punto corrente lasciato dal comando precedente, spesso M x y. La a minuscola usa un punto finale relativo anziché assoluto; il tutorial MDN sui tracciati spiega le forme dei comandi.

Per esempio, M70 370 A140 110 0 0 1 280 420 parte da (70, 370), usa raggi di 140 e 110, lascia l'ellisse non ruotata, sceglie il percorso più breve con sweep 1 e termina in (280, 420). I numeri sono nel sistema di coordinate utente dell'SVG. Non sono automaticamente una promessa sulle dimensioni fisiche di stampa.

Guarda i quattro archi possibili

Abbiamo renderizzato questo campione originale da un file SVG. Ogni pannello usa lo stesso inizio (70, 370), fine (280, 420), raggi 140 110 e rotazione 0. Cambiano soltanto i flag. L'arancione indica l'inizio e il verde la fine. È un rendering nello stile di un browser dei nostri comandi di tracciato, non un output di conversione PerfectVector.

Le etichette “sopra” e “sotto” descrivono questi punti iniziale e finale e questa disposizione delle coordinate. Non sono significati universali di 0 e 1. Una diversa posizione degli estremi o un gruppo trasformato può spostare altrove l'arco visibile. Il flag sweep seleziona la direzione di aumento o diminuzione dell'angolo lungo l'ellisse scelta; in un tipico viewBox SVG con asse y rivolto verso il basso, sweep 1 appare comunemente orario. L'editor interattivo degli archi del tutorial SVG è utile per osservare il cambio di direzione mantenendo fissi gli altri input.

Per riprodurre un pannello, salva questo come arc.svg e aprilo in un browser:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Cambia soltanto le due cifre dopo la rotazione 0, usando la tabella sopra. Se cambi contemporaneamente un raggio o un estremo, non puoi più sapere quale modifica ha cambiato il percorso.

Correggi una curva che va nel verso sbagliato

1. Trova il segmento. Nel valore d del tracciato, identifica il punto iniziale precedente, il comando A e il punto finale. Un tracciato può contenere diversi segmenti di arco; modifica soltanto quello sbagliato.
2. Controlla la scelta lungo o breve. Se una piccola curva improvvisamente gira attorno a gran parte dell'ellisse, cambia large-arc-flag da 1 a 0. Se un segmento di anello previsto si riduce a un breve collegamento, prova 1.
3. Controlla il lato o il verso di percorrenza. Mantieni fisso tutto il resto e cambia sweep-flag. Questo spesso sposta l'arco sull'altro lato della corda tra gli estremi.
4. Esamina l'intera grafica. Un segmento corretto può comunque incontrare quello vicino con un angolo sgradevole o estendersi fuori dal viewBox. Riapri il file alla dimensione di visualizzazione prevista, poi regola la geometria adiacente o la tela secondo necessità.

Se nessuna coppia di flag corrisponde alla sagoma desiderata, il problema probabilmente non è un flag. I raggi e gli estremi determinano le ellissi candidate; i flag selezionano soltanto tra esse. La guida agli archi di NaN illustra come cambiare un raggio o un estremo modifica l'ellisse sottostante.

Rotazione e limiti dei raggi

x-axis-rotation conta quando rx e ry differiscono: ruota l'ellisse prima che venga scelto l'arco. Con raggi uguali, ruotare un cerchio non ne cambia il contorno. Per un logo con un bordo ovale inclinato, prova prima i raggi e la rotazione desiderati, poi scegli i flag. Altrimenti potresti scegliere il lato corretto dell'ellisse sbagliata.

Le note di implementazione SVG 2 definiscono casi speciali. Se uno dei raggi è zero, il segmento viene trattato come una linea retta. Se i raggi sono troppo piccoli per collegare gli estremi, il renderer li ingrandisce quanto basta per rendere possibile l'arco. Se inizio e fine sono identici, il segmento di arco viene omesso. Queste regole spiegano perché un cambio di flag a volte sembra non fare nulla. Significano anche che il solo rendering potrebbe non dimostrare che i raggi digitati siano stati usati davvero senza correzione.

Usa una curva ricalcata come punto di partenza, non come formula dell'arco

Un logo raster può mostrare un bordo circolare pulito, ma l'SVG recuperato può descriverlo con segmenti Bézier e punti di ancoraggio anziché con un comando A esplicito. Un vettorializzatore di immagini ricostruisce forme visibili; non deduce necessariamente il centro del cerchio, i raggi o i flag dell'arco originali del designer. Se esiste l'originale vettoriale, modifica quel file anziché ricalcarlo di nuovo.

Quando esiste soltanto un PNG o JPG, trasforma l'immagine in tracciati vettoriali modificabili con PerfectVector, esamina il contorno recuperato e poi decidi se richiede un ridisegno geometrico preciso. Per l'anello di un distintivo, misura il centro e i raggi previsti in un editor vettoriale e sostituisci soltanto quella sezione curva se conta la coerenza geometrica. Mantieni il ricalco accettato per la grafica irregolare che un'ellisse esatta deformerebbe. La nostra guida alla modifica degli SVG tratta la scelta tra un editor visivo e una modifica mirata del codice; la guida alla pulizia dei nodi aiuta quando una curva ricalcata è difficile da rimodellare.

Questa divisione del lavoro conta: PerfectVector può aiutare a recuperare come tracciati una sorgente soltanto raster, mentre impostare parametri esatti dell'arco e controllare le giunzioni rimane una decisione di design. Non convertire un SVG già pulito in PNG e ricalcarlo di nuovo soltanto per cambiare un flag.

Prima di consegnare l'SVG

• Conserva una copia dell'originale o del ricalco accettato.
• Conferma punto iniziale, punto finale, raggi, rotazione e i due valori dei flag, in quest'ordine.
• Confronta il percorso scelto sia a zoom ravvicinato sia alla dimensione d'uso effettiva.
• Esamina le giunzioni e verifica se il percorso lungo attraversa il bordo del viewBox.
• Riapri l'SVG consegnato nell'editor o nel browser di destinazione. Uno screenshot visivamente corretto non dimostra che il destinatario possa modificare il tracciato come previsto.

FAQ

Cosa significano i flag large-arc e sweep in SVG? Il flag large-arc seleziona l'arco candidato più breve o più lungo tra due estremi. Il flag sweep seleziona il verso in cui il segmento percorre l'ellisse. Insieme scelgono tra quattro candidati quando la geometria non è degenere.

Perché cambiare il flag large-arc SVG non ha un effetto visibile? Controlla se gli estremi sono punti opposti dell'ellisse, rendendo entrambi i percorsi mezzi giri. Controlla anche estremi identici, un raggio zero o raggi che il renderer ha regolato per collegare i punti. Cambia un parametro alla volta e confronta il tracciato renderizzato.

La vettorializzazione delle immagini può recuperare automaticamente il mio comando di arco originale? Non darlo per scontato. Un ricalco può recuperare forme vettoriali modificabili dalla grafica raster, ma il risultato può usare curve Bézier o molti punti di ancoraggio. Ricostruisci un cerchio o un'ellisse precisi in un editor vettoriale quando serve la geometria originale.

Fonti

1. W3C — Tracciati SVG 2 — Sintassi degli archi, combinazioni di flag e geometria dei tracciati.
2. W3C — Note di implementazione SVG 2 — Correzione dei raggi e gestione degli archi degeneri.
3. MDN — Tracciati SVG — Comandi di tracciato assoluti e relativi e tutorial sugli archi.
4. SVG Tutorial — Arco — Dimostrazioni interattive di raggi, rotazione e flag.
5. NaN — Comandi dei tracciati SVG: archi — Spiegazione interattiva dell'adattamento dell'ellisse e dei risultati dei flag.

Ti serve una sorgente modificabile prima di modellare un emblema soltanto raster? Converti l'immagine in tracciati vettoriali, esamina il risultato e ridisegna ogni arco il cui raggio o sweep esatto è importante.