Contorni SVG puntinati: spaziatura ed estremità tonde

Per un contorno SVG puntinato, assegna alla forma un contorno, imposta stroke-linecap="round" e usa un tratto di lunghezza zero seguito da uno spazio positivo, come stroke-dasharray="0 20". La larghezza del contorno controlla il diametro del punto. Il secondo numero di dash-array controlla la distanza lungo il tracciato tra i centri dei punti; non è lo spazio vuoto tra i loro bordi visibili.

Questa distinzione conta quando un bordo appare affollato dopo aver arrotondato le estremità. Un distintivo chiuso aggiunge un altro problema: la ripetizione può raggiungere il punto iniziale con un intervallo residuo più corto. Gli esempi qui sotto separano forma delle estremità, spaziatura visibile e chiusura, così puoi regolare il valore giusto.

Sono impostazioni decorative del contorno. Non creano un nuovo contorno scostato e non trasformano ogni punto disegnato in un tracciato di taglio separato.

Confronta estremità piatte, tonde e punti

stroke-dasharray alterna lunghezze di tratti disegnati e spazi non disegnati. Un elenco di due numeri rende facile esaminare quella ripetizione. La documentazione MDN di dash-array spiega anche come un elenco con un numero dispari di voci si ripete formando una sequenza di lunghezza pari.

Copia questo SVG autonomo in un file e aprilo in un browser. Ogni tracciato originale è lungo 240 unità, con una larghezza del contorno di 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

La prima riga usa 12 20 con estremità piatte butt. I tratti completi occupano 12 unità, lasciando 20 unità di spazio visibile. La seconda riga usa gli stessi numeri con estremità tonde. Ogni estremità si estende di 4 unità oltre il punto finale del tratto sottostante, quindi un tratto completo occupa 20 unità e lo spazio visibile scende a 12.

La terza riga cambia la lunghezza del tratto a zero. Le estremità tonde producono punti con diametro 8 e centri distanti 20 unità su questo tracciato dritto. Lo spazio visibile tra i bordi è di 12 unità. Le regole di disegno SVG del W3C definiscono le estremità dei tratti, incluso il trattamento dei tratti di lunghezza zero; la documentazione MDN delle estremità spiega la geometria.

Per tratti completi e separati su un segmento dritto senza calibrazione delle distanze o trasformazioni, i calcoli utili sono:

• Estremità butt: lunghezza visibile del tratto = dash; spazio visibile = gap.
• Estremità round: lunghezza visibile del tratto = dash + stroke-width; spazio visibile = gap - stroke-width.
• Punto tondo: diametro = stroke-width; distanza tra centri = gap; spazio visibile = gap - stroke-width.

Se l'ultimo calcolo è zero o negativo, i punti si toccano o si sovrappongono. Nelle curve, la distanza lungo il tracciato differisce dalla distanza diretta tra i punti. Esamina angoli e curve anziché applicare il calcolo dello spazio su una linea retta all'intero contorno.

Adatta la ripetizione intorno a un distintivo chiuso

I seguenti tracciati rettangolari misurano ciascuno 180 per 120 unità. Il loro perimetro è 2 × (180 + 120) = 600. Il tracciato parte dall'angolo superiore sinistro e procede in senso orario.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

A sinistra, 0 32 posiziona i centri dei punti alle distanze lungo il tracciato 0, 32, 64 e così via fino a 576. Restano soltanto 24 unità prima che il tracciato torni all'inizio. L'intervallo di chiusura è più corto degli altri intervalli di 32 unità, quindi la giunzione è irregolare. Aumentare le dimensioni di visualizzazione dell'SVG ingrandisce quella differenza senza risolverla.

A destra, 0 30 divide il perimetro in 20 intervalli uguali. In questo specifico rettangolo entrambe le lunghezze dei lati sono anche divisibili per 30, quindi gli angoli coincidono con i punti. Lungo ogni lato dritto, i punti di 8 unità lasciano 22 unità di spazio visibile. Questo corregge la ripetizione del distintivo scelto; non promette una spaziatura visiva identica su ogni contorno curvo.

Per il tuo contorno, scegli un numero desiderato di punti e dividi il perimetro del tracciato per quel numero per ottenere una distanza iniziale di ripetizione. Poi controlla il risultato realmente renderizzato, soprattutto curve, piccoli dettagli e punto di chiusura. Una forma con più sottotracciati scollegati richiede attenzione separata perché il motivo tratteggiato riparte per ogni sottotracciato, come descrive la specifica di disegno SVG.

stroke-dashoffset sposta la posizione iniziale del motivo lungo il tracciato. Può mettere una giunzione evidente in un punto meno visibile, ma non rende 600 divisibile per una ripetizione di 32 unità. Usa una ripetizione adattata quando l'obiettivo è una chiusura regolare. La documentazione MDN di dash-offset documenta quella regolazione della fase.

Abbiamo aperto entrambi i file SVG autonomi separatamente e controllato il loro rendering nel browser rispetto a questo confronto. Gli esempi usano valori senza unità, nessuna calibrazione pathLength, nessuna trasformazione e nessun CSS esterno. Dimostrano questi tracciati scritti a mano, non una conversione PerfectVector o un test di compatibilità tra applicazioni.

Mantieni coerenti dimensioni e impostazioni di disegno

Parti da valori numerici nelle coordinate dell'SVG stesso, come sopra. Non sostituirli con percentuali supponendo che rappresentino la stessa frazione del perimetro del tracciato. La documentazione di dash-array descrive la risoluzione delle percentuali rispetto al viewport anziché alla lunghezza del tracciato.

Se usi pathLength per normalizzare le distanze, calcola il motivo tratteggiato in quel sistema di distanza calibrato. Evita di mescolare il perimetro non calibrato di questo esempio con valori di tratteggio normalizzati di un altro frammento. La guida all'animazione dei contorni SVG mostra un uso diverso della calibrazione nativa della lunghezza per rivelare un disegno.

Imposta fill="none" quando vuoi soltanto il bordo. Un riempimento può restare visibile anche quando parte del contorno è tratteggiata. Se i punti previsti scompaiono, conferma che l'elemento abbia un contorno visibile e che una regola CSS non abbia sovrascritto i suoi attributi di presentazione. La lista di controlli per contorni assenti descrive questi controlli prima di cambiare la spaziatura.

Lascia spazio sufficiente intorno alla geometria per il contorno. Un contorno di 8 unità si estende oltre il tracciato e le estremità tonde oltre le estremità aperte. L'esempio include margini affinché i punti non vengano tagliati dal viewport. Testa l'SVG consegnato alle dimensioni effettive di visualizzazione; punti minuscoli che appaiono distinti in un'anteprima ingrandita possono essere difficili da vedere in un'icona.

Separa la preparazione della grafica dal disegno del bordo

Se il motivo dentro un distintivo esiste soltanto come PNG o JPG, il procedimento da immagine a vettore di PerfectVector può preparare grafica SVG modificabile per quel motivo. Confronta sagoma, piccole aperture e regioni separate con l'immagine originale prima di inserirlo nel bordo. Mantieni il contorno decorativo come forma separata così larghezza e spaziatura dei punti possono cambiare indipendentemente.

Conserva un originale vettoriale esistente quando disponibile. Un rettangolo o altro bordo semplice è di solito facile da disegnare direttamente in un editor. La vettorializzazione non progetta automaticamente un bordo scostato, non recupera una singola linea centrale e non sceglie la spaziatura dei tratti. Se un segno spesso ricalcato ha due limiti, la guida agli SVG a linea singola spiega perché è diverso da un solo percorso di disegno.

Per un procedimento di taglio, non supporre che la macchina interpreti il disegno decorativo del contorno come singoli tagli a forma di punto. Prepara la geometria prevista in un editor ed esamina l'anteprima dell'applicazione di destinazione. Questo articolo testa il disegno nel browser, non il comportamento di una macchina da taglio. Le guide di modifica del blog descrivono decisioni correlate di preparazione dei file.

Controlla il contorno finale

Prima di accettare il file, esamina separatamente il breve tracciato aperto e il bordo chiuso. Conferma stile delle estremità, larghezza del contorno e numeri di ripetizione; poi esamina i primi e ultimi segni sul tracciato aperto e la giunzione sul tracciato chiuso. Controlla le curve strette alle dimensioni di utilizzo della grafica.

Riapri l'SVG salvato nella destinazione prevista. Se ti serve un disegno decorativo modificabile, conserva le proprietà del contorno. Se la destinazione richiede profili permanenti, esegui e verifica quella conversione come passaggio di modifica separato. Conserva una copia sorgente modificabile per poter rivedere la spaziatura in seguito.

FAQ

Perché i miei tratti sembrano più vicini dopo aver scelto estremità tonde? Le estremità tonde si estendono oltre entrambe le estremità dei tratti. Su un segmento dritto, lo spazio visibile tra tratti completi è lo spazio specificato meno la larghezza del contorno, purché i segni restino separati.

Come creo punti tondi invece di brevi capsule? Usa un tratto di lunghezza zero, uno spazio positivo ed estremità tonde. Per esempio, una larghezza del contorno di 8 con stroke-dasharray="0 20" produce punti di 8 unità con centri distanti 20 unità su un tracciato dritto.

Perché uno spazio è diverso intorno a un contorno chiuso? La ripetizione può non dividere uniformemente il perimetro. Adatta la ripetizione alla lunghezza del tracciato, poi esamina il punto di chiusura e gli angoli. Spostare dash offset cambia la fase del motivo, ma non risolve la differenza aritmetica.

Fonti

1. MDN — stroke-dasharray — Definisce l'elenco alternato di tratti e spazi e la gestione dei suoi valori.
2. MDN — stroke-linecap — Spiega geometria delle estremità piatte e tonde e comportamento a lunghezza zero.
3. W3C — Disegno SVG — Specifica disegno dei tratti, trattamento delle estremità e gestione del motivo sui sottotracciati.
4. MDN — stroke-dashoffset — Definisce l'offset usato per spostare un motivo tratteggiato.

Se il motivo del distintivo parte da un'immagine raster, prepara un candidato SVG con PerfectVector, esamina contorni e aperture e aggiungi il bordo puntinato come forma modificabile separata.