Recimo, da imate vrstico v SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Lahko uporabite stroke-dasharray lastnost v CSS za izdelavo pomišljajev:
line {
stroke-dasharray: 5;
}To 5 vrednost je relativna enota glede na velikost datotek SVG viewBox. Uporabili bi lahko katero koli dolžino CSS. Toda naredi vzorec črtic, dolgih 5 enot, s 5 enotami vrzeli med njimi.
Zaenkrat je vse v redu. Uporabimo lahko dve vrednosti, kjer druga vrednost individualno nastavi dolžino vrzeli:
Zdaj imamo pomišljaje, ki so 5 enot, in vrzeli, ki so 10. Poskusimo s tretjo vrednostjo:
Vidite, kako tukaj oblikujemo vzorec? Gre:
- Pomišljaj: 5 enot
- Vrzel: 10 enot
- Pomišljaj: 15 enot
Mislili bi, da se za tem ponovi v popolnoma isti kadenci. Vendar ne! Če bi, bi imeli črtice, ki bi se zaletavale ena v drugo:
- Pomišljaj: 5 enot
- Vrzel: 10 enot
- Pomišljaj: 15 enot
- Pomišljaj: 5 enot
- Vrzel: 10 enot
- Pomišljaj: 15 enot
- …in tako naprej.
Namesto tega stroke-dasharray postane vse pametno in podvoji vzorec, če obstaja liho število vrednosti Torej ...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Pravzaprav zato deluje ena sama vrednost! Prej smo razglasili samca 5 vrednost. To je res enako kot bi rekel stroke-dasharray: 5 5. Brez druge vrednosti, stroke-dasharray implicitno podvoji prvo vrednost, da dobi ponovljiv vzorec. V nasprotnem primeru bi bila to le polna črta pomišljajev, ki so dolge 5 enot, a med njimi ni vrzeli!
Vzorec je odvisen tudi od velikosti same oblike. Naš SVG line je 500 enot. Postavimo večje stroke-dasharray vrednosti in jih seštejte:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Če se vzorec izvede štirikrat (150 enot ⨉ 4 ponovitve), imamo opravka s skupno 600 enotami. Teh dodatnih 100 enot je odrezanih, da se prepreči prelivanje vzorca.
To je vse.
🎩 Namig za klobuk Joshua Dance za klicati to!
