Załóżmy, że masz linię w SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Możesz użyć stroke-dasharray właściwość w CSS do tworzenia myślników:
line {
stroke-dasharray: 5;
}Że 5 wartość jest jednostką względną opartą na rozmiarze pliku SVG viewBox. Naprawdę moglibyśmy użyć dowolnej długości CSS. Ale to, co robi, to tworzenie wzoru z kresek o długości 5 jednostek z 5 przerwami między nimi.
Na razie w porządku. Możemy użyć dwóch wartości, gdzie druga wartość indywidualnie określa długość przerwy:
Teraz mamy kreski, które mają 5 jednostek i przerwy, które mają 10. Spróbujmy trzecią wartość:
Widzisz, jak tworzymy tutaj wzór? To idzie:
- Kreska: 5 jednostek
- Luka: 10 jednostek
- Kreska: 15 jednostek
Można by pomyśleć, że potem powtarza się dokładnie w tej samej kadencji. Ale nie! Gdyby tak było, mielibyśmy myślniki wpadające na siebie:
- Kreska: 5 jednostek
- Luka: 10 jednostek
- Kreska: 15 jednostek
- Kreska: 5 jednostek
- Luka: 10 jednostek
- Kreska: 15 jednostek
- …i tak dalej.
Zamiast tego, stroke-dasharray robi wszystko sprytnie i powiela wzorzec, jeśli istnieje nieparzysta liczba wartości Więc…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Właśnie dlatego działa pojedyncza wartość! Wcześniej zadeklarowaliśmy singiel 5 wartość. To naprawdę to samo, co powiedzenie stroke-dasharray: 5 5. Bez drugiej wartości, stroke-dasharray niejawnie duplikuje pierwszą wartość, aby uzyskać powtarzalny wzorzec. W przeciwnym razie byłaby to po prostu ciągła linia kresek o długości 5 jednostek, ale bez przerw między nimi!
Wzór zależy również od wielkości samego kształtu. Nasz SVG line wynosi 500 jednostek. Ustawmy większy stroke-dasharray wartości i dodaj je:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Jeśli wzorzec powtarza się cztery razy (150 jednostek ⨉ 4 iteracje), mamy do czynienia z sumą 600 jednostek. Te dodatkowe 100 jednostek jest odcinane, aby zapobiec przepełnieniu się wzoru.
To wszystko.
🎩 Kapelusz czubek do Joshua Taniec dla wołając to!
