এসভিজি (SVG) ফাইলের মাধ্যমে শুধু গ্রাফিক্সই নয়, বরং টেক্সটও যোগ করা সম্ভব। <text> ট্যাগের মাধ্যমে এসভিজি চিত্রে টেক্সট যোগ করা যায়। এটি আপনাকে ওয়েব পেজের গ্রাফিক্সের মধ্যে টেক্সট সন্নিবেশ করতে এবং তার অবস্থান, আকার, রং ইত্যাদি কাস্টমাইজ করতে সহায়তা করে।
<text> ট্যাগের ব্যবহার
<text> ট্যাগটি মূলত টেক্সটের একটি এলিমেন্ট, যেখানে আপনি টেক্সটটি নির্দিষ্ট স্থানে এবং কাস্টম স্টাইলের মাধ্যমে প্রদর্শন করতে পারেন। এই ট্যাগের মধ্যে টেক্সটের অবস্থান, আকার, রঙ এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করা যায়।
উদাহরণ:
<svg width="500" height="200">
<text x="50" y="50" font-family="Arial" font-size="30" fill="blue">Hello, SVG!</text>
</svg>
ব্যাখ্যা:
xএবংy: টেক্সটের অবস্থান নির্ধারণ করে।xহলো অনুভূমিক (horizontal) এবংyহলো উল্লম্ব (vertical) অবস্থান।font-family: টেক্সটের ফন্ট পরিবারের নাম।font-size: টেক্সটের আকার (ফন্ট সাইজ)।fill: টেক্সটের রঙ।
<text> ট্যাগের অন্যান্য গুরুত্বপূর্ণ এট্রিবিউট
- text-anchor:
এটি টেক্সটের কিভাবে আলাইন হবে তা নির্ধারণ করে। এটিstart,middle, বাendহতে পারে।- উদাহরণ:
text-anchor="middle"– এটি টেক্সটকে কেন্দ্রবিন্দুতে সারিবদ্ধ করে।
- উদাহরণ:
- stroke এবং stroke-width:
এই অ্যাট্রিবিউটগুলি টেক্সটের বর্ডার বা সীমানা নির্ধারণ করে।- উদাহরণ:
stroke="black" stroke-width="2"– এটি টেক্সটের চারপাশে কালো সীমানা তৈরি করবে।
- উদাহরণ:
- transform:
এটি টেক্সটের ঘূর্ণন, স্কেল বা স্থানান্তরের জন্য ব্যবহৃত হয়।- উদাহরণ:
transform="rotate(45)"– এটি টেক্সটটিকে 45 ডিগ্রী ঘুরিয়ে দেবে।
- উদাহরণ:
- dy:
এটি টেক্সটের উল্লম্ব অবস্থান সামান্য পরিবর্তন করতে ব্যবহৃত হয়, বিশেষ করে যখন একাধিক লাইন টেক্সট থাকে।- উদাহরণ:
dy="1.5em"– এটি টেক্সটের উপরিভাগ থেকে কিছুটা নিচে নিয়ে আসবে।
- উদাহরণ:
একাধিক লাইন টেক্সট যোগ করা
এসভিজি এর <text> ট্যাগ দিয়ে একাধিক লাইন টেক্সট যোগ করা সম্ভব, তবে <tspan> ট্যাগের মাধ্যমে প্রতিটি লাইনে টেক্সট স্থানান্তর করা হয়।
উদাহরণ:
<svg width="500" height="200">
<text x="50" y="50" font-family="Arial" font-size="30" fill="blue">
Hello,
<tspan x="50" dy="1.2em">Welcome to SVG!</tspan>
<tspan x="50" dy="1.2em">Enjoy the tutorial!</tspan>
</text>
</svg>
ব্যাখ্যা:
<tspan>: এটি টেক্সটের নতুন লাইনে স্থানান্তর করতে ব্যবহৃত হয়।dyঅ্যাট্রিবিউটের মাধ্যমে প্রতিটি লাইনের মধ্যে একটু স্থান রাখা হয়।
সারাংশ
এসভিজি <text> ট্যাগের মাধ্যমে আপনি সহজেই গ্রাফিক্সের মধ্যে টেক্সট যোগ করতে পারেন এবং সেটি কাস্টমাইজ করতে পারেন। এর মাধ্যমে বিভিন্ন প্রকার স্টাইলিং, অবস্থান, আকার এবং অ্যানিমেশন প্রয়োগ করে ওয়েব ডিজাইনে টেক্সট ব্যবহারের একটি শক্তিশালী উপায় তৈরি হয়।
Read more
