HTML5 SVG-এ পলিগন আঁকার পদ্ধতি
SVG-এর полন রূপ Scalable Vector Graphics। এটি XML-এ ২D-গ্রাফিক্স এবং গ্রাফিক্যাল অ্যাপ্লিকেশন বর্ণনার একটি ভাষা, जिसे SVG ভিউয়ার রেন্ডার করে। অধিকাংশ ওয়েব ব্রাউজার PNG, GIF, JPG-এর মতো SVG প্রদর্শন করতে পারে।
HTML SVG-এ পলিগন আঁকতে SVG <polygon> এলিমেন্ট ব্যবহার করা হয়। <polygon> এলিমেন্টটি কমপক্ষে তিনটি বাহুধরন একটি গ্রাফিক তৈরি করে। points অ্যাট্রিবিউটে পলিগনের প্রতিটি কোণার x এবং y কোঅর্ডিনেট দেওয়া থাকে।
উদাহরণ
নিচের কোডটি চালিয়ে HTML5 SVG-এ পলিগন আঁকতে শিখুন:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Polygon</title>
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
<polygon points="100, 20 200,180 100,200" style="fill:green;" />
</svg>
</body>
</html>
আউটপুট
টিপস: পলিগনে যেকোনো সংখ্যক পয়েন্ট দেওয়া যায়। পয়েন্টগুলো ক্রমানুসারে সংযুক্ত হয় এবং শেষ পয়েন্ট স্বয়ংক্রিয়ভাবে প্রথম পয়েন্টের সাথে জড়ে যায়, যেন একটি বন্ধ আকৃতি তৈরি হয়।
