נניח שיש לך שורה ב-SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>אתה יכול להשתמש ב stroke-dasharray נכס ב-CSS כדי ליצור מקפים:
line {
stroke-dasharray: 5;
}כי 5 הערך הוא יחידה יחסית המבוססת על גודל ה-SVG viewBox. נוכל להשתמש בכל אורך CSS, באמת. אבל מה שהוא עושה זה ליצור תבנית של מקפים באורך 5 יחידות עם פערים של 5 יחידות ביניהם.
בינתיים הכל טוב. אנו יכולים להשתמש בשני ערכים כאשר הערך השני קובע בנפרד את אורך הפער:
כעת יש לנו מקפים שהם 5 יחידות ופערים שהם 10. בוא ננסה ערך שלישי:
רואה איך אנחנו יוצרים כאן דפוס? זה הולך:
- מקף: 5 יחידות
- פער: 10 יחידות
- מקף: 15 יחידות
אפשר לחשוב שזה חוזר על עצמו אחרי זה בדיוק באותו קצב. אבל לא! אם זה היה קורה, היו לנו מקפים שיתקלו אחד בשני:
- מקף: 5 יחידות
- פער: 10 יחידות
- מקף: 15 יחידות
- מקף: 5 יחידות
- פער: 10 יחידות
- מקף: 15 יחידות
- …וכן הלאה.
במקום זאת, stroke-dasharray מתחכם ומשכפל את התבנית אם יש מספר אי זוגי של ערכים אז...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;זו למעשה הסיבה שערך יחיד עובד! מוקדם יותר, הכרזנו על סינגל 5 ערך. זה באמת אותו דבר כמו להגיד stroke-dasharray: 5 5. בלי הערך השני, stroke-dasharray משכפל באופן מרומז את הערך הראשון כדי לקבל דפוס שניתן לחזור עליו. אחרת, זה יהיה רק קו מוצק של מקפים באורך 5 יחידות, אבל ללא פערים ביניהם!
הדפוס תלוי גם בגודל הצורה עצמה. ה-SVG שלנו line הוא 500 יחידות. בואו נגדיר יותר stroke-dasharray ערכים וחבר אותם:
stroke-dasharray: 10 20 30 40 50; /* 150 units */אם התבנית פועלת ארבע פעמים (150 יחידות ⨉ 4 איטרציות), יש לנו עסק עם 600 יחידות בסך הכל. 100 יחידות נוספות מנותקות כדי למנוע מהתבנית לעלות על גדותיה.
זה הכל.
🎩 טיפ לכובע ל ריקוד יהושע ל קורא את זה החוצה!
