Tegyük fel, hogy van egy sor az SVG-ben:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Használhatja a stroke-dasharray tulajdonság a CSS-ben kötőjelek létrehozásához:
line {
stroke-dasharray: 5;
}Hogy 5 Az érték az SVG-k méretén alapuló relatív egység viewBox. Valójában bármilyen hosszúságú CSS-t használhatunk. De amit csinál, az az, hogy 5 egység hosszúságú kötőjelmintát készít, köztük 5 egységnyi hézaggal.
Eddig jó. Két értéket használhatunk, ahol a második érték egyedileg állítja be a hézag hosszát:
Most kötőjelek vannak, amelyek 5 egységből állnak, és hézagok 10. Próbáljunk meg egy harmadik értéket:
Látod, hogyan alakítunk ki itt egy mintát? Megy:
- kötőjel: 5 egység
- Hézag: 10 egység
- kötőjel: 15 egység
Azt hinné, hogy ez utána pontosan ugyanabban a ütemben ismétlődik. De nem! Ha így lenne, kötőjelek ütköznének egymásba:
- kötőjel: 5 egység
- Hézag: 10 egység
- kötőjel: 15 egység
- kötőjel: 5 egység
- Hézag: 10 egység
- kötőjel: 15 egység
- …stb.
Ehelyett stroke-dasharray minden okos lesz, és megkettőzi a mintát, ha páratlan számú érték van, tehát…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Valójában ezért működik egyetlen érték! Korábban szingliről nyilatkoztunk 5 érték. Ez tényleg ugyanaz, mint kimondani stroke-dasharray: 5 5. A második érték nélkül stroke-dasharray implicit módon megkettőzi az első értéket, hogy megismételhető mintát kapjon. Ellenkező esetben csak egy 5 egység hosszúságú kötőjelek folytonos vonala lenne, de nincs hézag közöttük!
A minta magának a forma méretétől is függ. A mi SVG-nk line 500 egység. Állítsuk nagyobbra stroke-dasharray értékeket és összeadjuk őket:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Ha a minta négyszer fut (150 egység ⨉ 4 iteráció), akkor összesen 600 egységgel van dolgunk. Ezt a további 100 egységet levágják, hogy megakadályozzák a minta túlcsordulását.
Ez minden.
🎩 Kalap tipp Joshua tánc mert ezt kiáltva!
