Arrotonda gli angoli SVG modificando la forma riempita

Per arrotondare l'angolo riempito di un tracciato SVG, cambia la geometria del tracciato. Ferma i due segmenti rettilinei adiacenti prima del vertice, poi collega i nuovi estremi con una curva. stroke-linejoin="round" cambia il tratto dipinto alla giunzione; lascia al suo posto il contorno riempito originale.

Questo tutorial arrotonda un angolo retto di un emblema originale riempito. Servono un editor di testo semplice e un browser. Alla fine avrai un SVG completo con un raccordo circolare di 20 unità, un controllo che il raggio scelto entri nei lati e il file angolare originale da confrontare o ripristinare.

Un raccordo è una curva che sostituisce uno spigolo e incontra tangenzialmente i lati adiacenti. L'esempio usa un quarto di arco circolare fra un lato orizzontale e uno verticale rettilinei. Non arrotonda automaticamente qualsiasi tracciato Bézier ricalcato.

Scegli la modifica richiesta dalla grafica

Il riferimento stroke-linejoin definisce come viene disegnato un tratto agli angoli del tracciato. Usa una giunzione tonda quando vuoi cambiare quel bordo dipinto. Per cambiare una sagoma riempita, modifica il tracciato effettivo.

Per un semplice rettangolo, il riferimento SVG rect documenta rx e ry. Il nostro emblema ha anche un lato diagonale, quindi convertirlo in un rettangolo arrotondato cambierebbe più del solo angolo scelto.

Se il problema è soltanto una lunga punta su un tratto, parti dalla diagnosi delle punte a spigolo. Questo articolo cambia invece la geometria riempita.

Salva l'originale angolare

Copia questo file completo in emblem-original.svg e aprilo nel browser. Il vertice superiore destro è (170, 30). Il lato entrante è orizzontale; quello uscente scende fino a (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Conserva il file come master di confronto. Aggiungere stroke="#df9d34", stroke-width="8" e stroke-linejoin="round" a questo tracciato gli dà un bordo dipinto arrotondato, mentre il riempimento scuro raggiunge ancora lo spigolo originale.

Sostituisci l'angolo con un arco di 20 unità

Sposta l'estremo della linea entrante di 20 unità a sinistra del vertice, a (150, 30). Sposta l'inizio della linea uscente di 20 unità verso il basso, a (170, 50). Un cerchio centrato a (150, 50) con raggio 20 collega quei punti con un quarto di arco.

Salva questo secondo file completo come emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 indica un arco circolare con raggi orizzontale e verticale di 20, rotazione zero, arco piccolo e flag sweep 1, che termina a (170, 50). La specifica dei tracciati SVG definisce questi parametri. Per questo angolo in senso orario selezionano il quarto di cerchio desiderato. La guida ai flag degli archi aiuta a diagnosticare un arco che si piega lungo il percorso sbagliato.

Il raggio del cerchio è verticale al primo estremo e orizzontale al secondo. La tangente segue quindi la linea orizzontale entrante e quella verticale uscente. Una curva può sembrare arrotondata creando comunque una discontinuità nella giunzione; questa costruzione dà a quei lati specifici direzioni tangenti corrispondenti.

Verifica che il raggio entri nei lati disponibili

In questo angolo di 90 gradi, un raccordo circolare occupa su ciascun lato adiacente una distanza pari al proprio raggio. Il tratto entrante è lungo 140 unità, ma quello uscente solo 70. Per questa costruzione di un singolo angolo, il raggio deve essere positivo e non superiore a 70; scegline uno minore se vuoi conservare una porzione rettilinea di quel lato uscente.

La funzione seguente è volutamente limitata a questo emblema e angolo esatti. Eseguila in una console JavaScript o in Node.js per generare il valore d sostitutivo.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

Con raggio 80, una costruzione ingenua terminerebbe l'arco a (170, 110), oltre il vertice successivo (170, 100). Il seguente V100 invertirebbe la direzione. Rifiuta quel raggio invece di accettare qualsiasi cosa il browser disegni.

Per altri angoli fra lati rettilinei, la distanza tangenziale dipende dall'angolo. Per un normale angolo convesso con angolo interno θ, la distanza è r / tan(θ / 2). Se arrotondi entrambe le estremità di un lato condiviso, la somma delle due distanze occupate deve rientrare in quel lato. Angoli concavi, curve esistenti e forme composte richiedono decisioni geometriche aggiuntive; questa funzione non li gestisce.

Verifica la sagoma cambiata, poi conserva il sorgente

1. Apri entrambi gli SVG completi alle stesse dimensioni e sullo stesso sfondo.
2. Rimuovi temporaneamente il tratto dalla versione con giunzione dipinta. Il riempimento deve corrispondere all'originale angolare.
3. Confronta il contorno superiore destro della versione arrotondata. Lati rimanenti, bordo diagonale e posizione complessiva devono corrispondere all'originale.
4. Esegui il controllo del raggio con 20 e poi con 80. Il primo produce il tracciato mostrato; il secondo genera l'errore del raggio.
5. Esamina l'SVG salvato nella destinazione in cui verrà usato. Ripristina l'originale se l'arrotondamento elimina un dettaglio intenzionale o la destinazione ne cambia l'aspetto.

Nota sul metodo: abbiamo renderizzato in Chromium i tracciati originale, con tratto tondo e raccordato. Un punto di controllo del riempimento a (169, 31) era dentro le prime due forme e fuori da quella raccordata. La funzione esatta sopra accettava 20 e rifiutava 80. Abbiamo anche verificato entrambi gli estremi dell'arco rispetto al raggio e alle direzioni tangenti adiacenti. Questo verifica l'esempio fornito a lati rettilinei, non un algoritmo di raccordo generico o l'output di una macchina da taglio.

Se la curva sporge all'esterno, esamina estremo dell'arco e flag sweep. Se resta una discontinuità, controlla che la tangente della curva corrisponda al segmento vicino; la guida alle giunzioni Bézier lisce spiega quella riparazione separata. La guida alla modifica degli SVG tratta apertura, ispezione e conservazione di un master utilizzabile.

Il ruolo di PerfectVector prima della modifica degli angoli

PerfectVector può recuperare tracciati vettoriali quando la grafica esiste soltanto come raster. Esamina prima il contorno recuperato, poi decidi quali angoli cambiare in una copia. Il flusso da immagine a vettore fornisce la fase di recupero; non applica automaticamente questa costruzione del raccordo.

Usa il vettore originale quando disponibile. Un contorno ricalcato può contenere segmenti Bézier e piccole irregolarità che non corrispondono a questo esempio rettilineo. Ridisegnare un semplice emblema voluto può essere più facile che arrotondare ogni giunzione ricalcata. Conserva la forma approvata prima di qualsiasi riprogettazione intenzionale e usa le guide ai flussi del blog per il controllo di consegna successivo.

Domande frequenti

Perché una giunzione tonda del tratto lascia appuntito l'angolo del riempimento?

La giunzione controlla il tratto dipinto attorno al tracciato. Il riempimento segue la geometria esistente e mantiene quindi l'angolo originale finché non sostituisci quella geometria con una curva.

Posso usare la funzione su qualsiasi tracciato SVG?

No. Gestisce un unico angolo retto specificato dell'emblema a lati rettilinei mostrato. Altri angoli, angoli concavi, curve esistenti e vincoli sui lati condivisi richiedono una costruzione propria.

Questo rende un file pronto per il taglio?

Cambia un solo contorno riempito nell'esempio. Esamina la geometria salvata ed esegui i controlli richiesti dalla macchina o dal processo produttivo effettivi; questa prova nel browser non dimostra un risultato fisico di taglio.

Fonti

1. MDN — SVG stroke-linejoin — Definisce l'impostazione del tratto distinta dalla geometria del riempimento nel confronto.
2. MDN — SVG rect — Documenta i controlli del raggio più semplici disponibili per i rettangoli.
3. W3C — Comandi degli archi ellittici SVG — Definisce raggi, flag ed estremo dell'arco usati nel tracciato arrotondato completo.

Se mancano i tracciati originali, recupera la grafica con PerfectVector. Confrontane il contorno con il riferimento, salva il master recuperato e prova eventuali modifiche intenzionali degli angoli in una copia separata alle dimensioni previste.