فرض کنید یک خط در 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 واحد اضافی برای جلوگیری از سرریز شدن الگو از بین می رود.
همه چیز هست
🎩 نوک کلاه به رقص جاشوا برای فراخوانی این!
