স্ট্রোক-দাশারে প্যাটার্নগুলি কীভাবে কাজ করে

বলুন আপনার SVG-তে একটি লাইন আছে:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

আপনি ব্যবহার করতে পারেন stroke-dasharray ড্যাশ তৈরি করতে সিএসএসে সম্পত্তি:

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 ইউনিট নিজেই উপচে পড়া থেকে প্যাটার্ন প্রতিরোধ বন্ধ বন্ধ করা হয়.

এখানেই শেষ.

🎩 টুপি টিপ জোশুয়ার নাচ উন্নত এই আউট কল!