SVG এর একটি গুরুত্বপূর্ণ উপাদান হলো path। এটি একটি খুবই শক্তিশালী ট্যাগ যা সোজা রেখা, বৃত্ত, কোণ এবং অন্যান্য যেকোনো আকৃতি তৈরি করতে ব্যবহৃত হয়। পাথ দিয়ে বিভিন্ন জটিল আকার তৈরি করা সম্ভব, যেমন স্যরিপ, কার্ভ ইত্যাদি। পাথের স্টাইলিং এবং ট্রান্সফর্মেশন করা যায় CSS এবং জাভাস্ক্রিপ্টের মাধ্যমে।
Path এর স্টাইলিং
SVG এর path ট্যাগ দিয়ে বিভিন্ন ধরনের গ্রাফিক্যাল উপাদান তৈরি করা হয়। path ট্যাগের মাধ্যমে ভিন্ন ধরনের আকৃতি তৈরি করা সম্ভব, এবং এই আকৃতির স্টাইলিংও করা যায়।
প্রধান স্টাইলিং এট্রিবিউটস:
- stroke: পাথের বাইরের বর্ডার বা প্রান্তের রঙ নির্ধারণ করে।
- উদাহরণ:
stroke="black"
- উদাহরণ:
- fill: পাথের ভিতরের অংশের রঙ নির্ধারণ করে।
- উদাহরণ:
fill="red"
- উদাহরণ:
- stroke-width: পাথের বর্ডারের প্রস্থ নির্ধারণ করে।
- উদাহরণ:
stroke-width="5"
- উদাহরণ:
- stroke-dasharray: পাথের বর্ডারে ড্যাশ বা ডট তৈরি করতে ব্যবহৃত হয়।
- উদাহরণ:
stroke-dasharray="5, 5"(ড্যাশের দৈর্ঘ্য ৫ পিক্সেল এবং দুরত্বও ৫ পিক্সেল)
- উদাহরণ:
- stroke-linecap: পাথের শেষ প্রান্তের আকার নির্ধারণ করে।
- উদাহরণ:
stroke-linecap="round"(গোলাকার প্রান্ত)
- উদাহরণ:
- stroke-linejoin: পাথের কোণগুলির আকার নির্ধারণ করে।
- উদাহরণ:
stroke-linejoin="round"(গোলাকার কোণ)
- উদাহরণ:
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 H 90 V 90 H 10 Z" fill="red" stroke="black" stroke-width="3" />
</svg>
এখানে, M 10 10 H 90 V 90 H 10 Z পাথটি একটি বর্গাকার আকৃতি তৈরি করছে, যার ভিতরের অংশে লাল রঙ এবং বাইরের প্রান্তে কালো রঙের বর্ডার রয়েছে।
Path Transformations
SVG এর path ট্যাগের উপর transformation প্রক্রিয়াগুলি দিয়ে গ্রাফিক্সকে স্থানান্তর (translation), ঘূর্ণন (rotation), মাপ পরিবর্তন (scaling) এবং পরিপথে (skewing) পরিবর্তন করা যায়। এসব ট্রান্সফর্মেশন CSS বা SVG ট্রান্সফর্ম অ্যাট্রিবিউট দিয়ে করা সম্ভব।
প্রধান ট্রান্সফর্মেশন এট্রিবিউটস:
- translate(): পাথের অবস্থান স্থানান্তরিত করতে ব্যবহৃত হয়।
- উদাহরণ:
transform="translate(50, 50)"(50 পিক্সেল উল্লম্ব এবং অনুভূমিক স্থানান্তর)
- উদাহরণ:
- rotate(): পাথের চারপাশে ঘূর্ণন তৈরি করে।
- উদাহরণ:
transform="rotate(45)"(পাথটি 45 ডিগ্রী ঘুরবে)
- উদাহরণ:
- scale(): পাথের আকার বড় বা ছোট করতে ব্যবহৃত হয়।
- উদাহরণ:
transform="scale(2)"(পাথটি দ্বিগুণ আকারে পরিবর্তিত হবে)
- উদাহরণ:
- skewX() এবং skewY(): পাথের আকৃতিকে অনুভূমিক বা উল্লম্বভাবে বিকৃত করে।
- উদাহরণ:
transform="skewX(30)"(আকৃতিটি অনুভূমিকভাবে 30 ডিগ্রি বিকৃত হবে)
- উদাহরণ:
- matrix(): একাধিক ট্রান্সফর্মেশন একসাথে প্রয়োগ করতে ব্যবহৃত হয়।
- উদাহরণ:
transform="matrix(1, 0, 0, 1, 50, 50)"(একসাথে স্থানান্তর এবং স্কেলিং)
- উদাহরণ:
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 H 90 V 90 H 10 Z" fill="red" stroke="black" stroke-width="3" transform="rotate(45 50 50)" />
</svg>
এখানে, পাথটি 45 ডিগ্রী ঘুরানো হয়েছে, যেখানে (50 50) হল ঘূর্ণনের কেন্দ্র।
সারাংশ
এসভিজি path ট্যাগের মাধ্যমে বিভিন্ন আকৃতি তৈরি করা যায় এবং সেই আকৃতির স্টাইলিং এবং ট্রান্সফর্মেশন CSS বা SVG এট্রিবিউটস ব্যবহার করে করা হয়। path স্টাইলিং এবং ট্রান্সফর্মেশন ওয়েব ডিজাইনে অত্যন্ত কার্যকরী হতে পারে, বিশেষ করে জটিল এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে।
Read more
