টেক্সটের ফন্ট, সাইজ, এবং স্টাইল কনফিগার করা

এসভিজি (SVG) ফরম্যাটে টেক্সট উপাদান ব্যবহার করে ওয়েব পেজে পাঠ্য বা শব্দ প্রদর্শন করা যায়। এসভিজি তে টেক্সটের ফন্ট, সাইজ, এবং স্টাইল কনফিগার করার জন্য CSS স্টাইলিং ব্যবহার করা হয়। এসভিজি টেক্সট উপাদানের জন্য একাধিক এট্রিবিউট এবং স্টাইলিং অপশন রয়েছে, যা পাঠ্যের চেহারা কাস্টমাইজ করতে সহায়তা করে।

এসভিজি টেক্সট উপাদান

এসভিজি ফরম্যাটে টেক্সট প্রদর্শন করতে <text> ট্যাগ ব্যবহার করা হয়। এর মধ্যে টেক্সটের কনটেন্ট, অবস্থান, এবং স্টাইলিং নির্ধারণ করা হয়।

বেসিক টেক্সট উদাহরণ:

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

ফন্ট কনফিগার করা

font-family: টেক্সটের ফন্ট নির্বাচন করতে font-family ব্যবহার করা হয়। এখানে আপনি পছন্দমত ফন্টের নাম দিতে পারেন, যেমন "Arial", "Verdana", "Times New Roman" ইত্যাদি।

font-size: টেক্সটের আকার বা সাইজ নির্ধারণ করতে font-size ব্যবহার করা হয়। এটি পিক্সেল, পয়েন্ট বা অন্যান্য ইউনিটে উল্লেখ করা যেতে পারে।

font-weight: টেক্সটের মোটা বা পাতলা হওয়ার জন্য font-weight ব্যবহার করা হয়। এটি সাধারণত "normal", "bold", বা সংখ্যাগত মান (যেমন, 100, 200, ..., 900) দিয়ে কনফিগার করা হয়।

font-style: টেক্সটের স্টাইল (যেমন italics) কনফিগার করতে font-style ব্যবহার করা হয়। এর মান হতে পারে "normal" অথবা "italic"।

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40" font-family="Arial" font-size="24" font-weight="bold" font-style="italic">
    Styled Text in SVG
  </text>
</svg>

টেক্সটের অ্যালাইনমেন্ট

text-anchor: টেক্সটের অবস্থান বা অ্যালাইনমেন্ট নির্ধারণ করতে text-anchor ব্যবহার করা হয়। এটি start, middle, এবং end তিনটি মানে হতে পারে:

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

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="40" font-family="Verdana" font-size="24" text-anchor="middle">
    Centered Text
  </text>
</svg>

টেক্সটের রঙ এবং স্ট্রোক

fill: টেক্সটের রঙ পরিবর্তন করতে fill ব্যবহার করা হয়।

stroke: টেক্সটের চারপাশে একটি বর্ডার বা স্ট্রোক যোগ করতে stroke ব্যবহার করা হয়।

stroke-width: স্ট্রোকের প্রস্থ নির্ধারণ করতে stroke-width ব্যবহার করা হয়।

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40" font-family="Arial" font-size="30" fill="blue" stroke="red" stroke-width="2">
    Text with Stroke and Fill
  </text>
</svg>

টেক্সটের গভীরতা এবং ট্রান্সফর্মেশন

transform: টেক্সটের রূপান্তর বা অ্যানিমেশন করতে transform ব্যবহার করা হয়, যেমন রোটেশন, স্কেলিং, ট্রান্সলেশন (স্থানান্তর) ইত্যাদি।

• rotate(): টেক্সট ঘুরানো
• scale(): টেক্সটের আকার বাড়ানো বা কমানো
• translate(): টেক্সট স্থানান্তর করা

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="40" font-family="Verdana" font-size="24" transform="rotate(15)">
    Rotated Text
  </text>
</svg>

সারাংশ

এসভিজি (SVG) তে টেক্সটের ফন্ট, সাইজ, এবং স্টাইল কনফিগার করা সহজ এবং অত্যন্ত নমনীয়। আপনি বিভিন্ন ফন্ট, সাইজ, রঙ, এবং স্টাইলিং ব্যবহার করে টেক্সটের চেহারা পরিবর্তন করতে পারেন। এছাড়া, টেক্সটের অ্যালাইনমেন্ট, স্ট্রোক, এবং রূপান্তরগুলি যোগ করে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করা যায়। এসভিজি টেক্সট ব্যবহারে ওয়েব ডেভেলপমেন্টে অত্যন্ত কার্যকরী এবং স্কেলযোগ্য গ্রাফিক্স তৈরি করা সম্ভব।