টেক্সটের অবস্থান এবং Alignment সেট করা

এসভিজি (SVG) ফরম্যাটে টেক্সট ব্যবহারের মাধ্যমে আপনি গ্রাফিক্সের মধ্যে লেখা বা ব্যানার তৈরি করতে পারেন। এসভিজি টেক্সটের অবস্থান এবং আলাইনমেন্ট সেট করার জন্য বেশ কিছু অপশন উপলব্ধ রয়েছে, যা আপনার ডিজাইনে প্রয়োজনীয় পরিবর্তন আনতে সাহায্য করবে।

১. টেক্সটের অবস্থান নির্ধারণ (Positioning the Text)

এসভিজি টেক্সটের অবস্থান নির্ধারণ করতে x এবং y অ্যাট্রিবিউট ব্যবহার করা হয়। এগুলি টেক্সটের শুরু পয়েন্ট (সর্বপ্রথম অক্ষরের অবস্থান) নির্দেশ করে।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" fill="black">Hello, SVG!</text>
</svg>

এই কোডে, x="50" এবং y="50" নির্দেশ করে যে টেক্সট "Hello, SVG!" ৫০, ৫০ পিক্সেলের অবস্থানে শুরু হবে। এর মানে হল যে টেক্সটটি এসভিজি ক্যানভাসের ৫০ পিক্সেল ডান দিকে এবং ৫০ পিক্সেল নিচে অবস্থান করবে।

২. টেক্সটের Alignment সেট করা (Text Alignment)

এসভিজি টেক্সটের Alignment নির্ধারণের জন্য text-anchor অ্যাট্রিবিউট ব্যবহার করা হয়। এটি টেক্সটের অবস্থান পরিবর্তন না করে, টেক্সটের অক্ষরের অবস্থান বা কেন্দ্র সঠিকভাবে ঠিক করে।

text-anchor এর প্রধান মানগুলো হলো:

• start: টেক্সটের শুরুর পয়েন্ট অনুযায়ী এলাইনমেন্ট (ডিফল্ট)
• middle: টেক্সটের কেন্দ্র অনুযায়ী এলাইনমেন্ট
• end: টেক্সটের শেষ পয়েন্ট অনুযায়ী এলাইনমেন্ট

উদাহরণ ১: start Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" text-anchor="start" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="start" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটের শুরুর পয়েন্ট (50, 50) থেকে শুরু হবে এবং টেক্সটের বাকি অংশ সেই অনুযায়ী সাজানো হবে।

উদাহরণ ২: middle Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="50" text-anchor="middle" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="middle" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটটি ১০০ পিক্সেল এক্স অক্ষরের অবস্থানকে কেন্দ্র করে সেন্টার করা হবে। এতে টেক্সটের শুরুর এবং শেষের অক্ষর ৫০ পিক্সেল দূরে থাকবে।

উদাহরণ ৩: end Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="50" text-anchor="end" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="end" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটটির শেষ অক্ষরের অবস্থান x="150" এর সাথে মিলে যাবে।

৩. টেক্সটের বেসলাইন Alignment (Baseline Alignment)

এসভিজি টেক্সটের বেসলাইন নির্ধারণ করার জন্য dominant-baseline অ্যাট্রিবিউট ব্যবহার করা হয়। এটি টেক্সটের বেসলাইন পজিশনকে নিয়ন্ত্রণ করে, যার মাধ্যমে আপনি টেক্সটের উল্লম্ব অবস্থান নির্ধারণ করতে পারেন।

dominant-baseline এর মানগুলো হলো:

• auto: ডিফল্ট মান, যা সাধারণত সিস্টেমের বেসলাইন অনুযায়ী নির্ধারণ হয়।
• middle: টেক্সটের মধ‌্যবিন্দু অনুযায়ী।
• hanging: টেক্সটের উপরের অংশে।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello, SVG!</text>
</svg>

এখানে dominant-baseline="middle" এবং text-anchor="middle" ব্যবহার করা হয়েছে, যার মাধ্যমে টেক্সটটি ক্যানভাসের কেন্দ্রের দিকে ঠিকভাবে এলাইন হয় এবং উল্লম্বভাবে সেন্টার করা হয়।

৪. রোটেশন (Rotation) এর মাধ্যমে টেক্সটের অবস্থান পরিবর্তন

এসভিজি টেক্সটের অবস্থান রোটেট করতেও transform অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এতে টেক্সট ঘুরিয়ে নতুন পজিশনে বসানো হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" transform="rotate(45 100,100)" fill="black">Hello, SVG!</text>
</svg>

এখানে rotate(45 100,100) রোটেশন ব্যবহার করা হয়েছে, যার মাধ্যমে টেক্সটটি ৪৫ ডিগ্রি কোণ এ ঘুরে যাবে এবং ১০০, ১০০ পিক্সেল পজিশনে থাকবে।

সারাংশ

এসভিজি (SVG) টেক্সটের অবস্থান এবং Alignment নির্ধারণ করার জন্য x, y, text-anchor, এবং dominant-baseline অ্যাট্রিবিউট ব্যবহার করা হয়। আপনি টেক্সটকে সঠিকভাবে স্থানান্তরিত করতে পারেন এবং তার Alignment নিয়ন্ত্রণ করতে পারেন, যাতে আপনার ডিজাইন সুন্দর এবং সঠিকভাবে প্রদর্শিত হয়। এর মাধ্যমে আপনি টেক্সটের অবস্থান, সাইজ এবং রোটেশনসহ আরও বিভিন্ন বিষয় নির্ধারণ করতে পারবেন।