কিভাবে HTML5 SVG এ একটি পলিলাইন আঁকতে হয়?

SVG মানে স্কেলেবল ভেক্টর গ্রাফিক্স এবং এটি XML-এ 2D-গ্রাফিক্স এবং গ্রাফিকাল অ্যাপ্লিকেশন বর্ণনা করার জন্য একটি ভাষা এবং XML তারপর একটি SVG ভিউয়ার দ্বারা রেন্ডার করা হয়। বেশিরভাগ ওয়েব ব্রাউজার SVG প্রদর্শন করতে পারে ঠিক যেমন তারা PNG, GIF, এবং JPG প্রদর্শন করতে পারে।

HTML SVG-তে বহুভুজ আঁকতে, SVG উপাদান ব্যবহার করুন। <পলিলাইন> উপাদানটি সরলরেখা নিয়ে গঠিত একটি আকৃতি তৈরি করা। পয়েন্ট অ্যাট্রিবিউট হল প্রতিটি কোণার জন্য x এবং y স্থানাঙ্ক।

উদাহরণ

HTML5 SVG-এ পলিলাইন কীভাবে আঁকতে হয় তা শিখতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 20%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Polyline</title>
   </head>

   <body>
      <h2>HTML5 SVG Polyline</h2>
      <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
         <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
      </svg>
   </body>
</html>

আউটপুট

কিভাবে HTML5 SVG এ একটি পলিলাইন আঁকতে হয়?