Come funzionano i modelli di stroke-dasharray

Supponiamo di avere una riga in SVG:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

È possibile utilizzare il stroke-dasharray proprietà in CSS per creare trattini:

line {
  stroke-dasharray: 5;
}

Che 5 value è un'unità relativa basata sulla dimensione degli SVG viewBox. Potremmo usare qualsiasi lunghezza CSS, davvero. Ma quello che fa è creare uno schema di trattini lunghi 5 unità con 5 spazi vuoti tra di loro.

Fin qui tutto bene. Possiamo usare due valori in cui il secondo valore imposta individualmente la lunghezza del gap:

Ora abbiamo trattini che sono 5 unità e spazi vuoti che sono 10. Proviamo un terzo valore:

Vedi come stiamo formando uno schema qui? Va:

• Cruscotto: 5 unità
• Divario: 10 unità
• Cruscotto: 15 unità

Penseresti che si ripeta dopo con la stessa identica cadenza. Ma no! Se lo facesse, avremmo dei trattini che si scontrano l'uno con l'altro:

• Cruscotto: 5 unità
• Divario: 10 unità
• Cruscotto: 15 unità
• Cruscotto: 5 unità
• Divario: 10 unità
• Cruscotto: 15 unità
• …e così via.

Invece, stroke-dasharray diventa tutto intelligente e duplica il modello se c'è un numero dispari di valori Quindi...

stroke-dasharray: 5 10 15;

/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;

Ecco perché un singolo valore funziona! In precedenza, abbiamo dichiarato un single 5 valore. Questo è davvero lo stesso che dire stroke-dasharray: 5 5. Senza il secondo valore, stroke-dasharray duplica implicitamente il primo valore per ottenere un modello ripetibile. Altrimenti, sarebbe solo una linea continua di trattini lunga 5 unità, ma senza spazi tra di loro!

Il motivo dipende anche dalle dimensioni della forma stessa. Il nostro SVG line è di 500 unità. Impostiamo più grande stroke-dasharray valori e sommali:

stroke-dasharray: 10 20 30 40 50; /* 150 units */

Se il modello viene eseguito quattro volte (150 unità ⨉ 4 iterazioni), abbiamo a che fare con 600 unità totali. Quelle 100 unità aggiuntive vengono tagliate per evitare che il modello trabocchi.

È tutto.

🎩 Punta del cappello a Danza di Giosuè per chiamando questo fuori!