HTML5 SVG-এ পলিলাইন কীভাবে আঁকবেন?

HTML5 SVG-এ পলিলাইন আঁকার পদ্ধতি

SVG-এর полন রূপ Scalable Vector Graphics। এটি XML-এ ২D-গ্রাফিক্স এবং গ্রাফিক্যাল অ্যাপ্লিকেশন বর্ণনার একটি ভাষা, जिसे SVG ভিউয়ার রেন্ডার করে। অধিকাংশ ওয়েব ব্রাউজার PNG, GIF, JPG-এর মতো SVG প্রদর্শন করতে পারে।

HTML SVG-এ পলিগন আঁকতে SVG <polyline> এলিমেন্ট ব্যবহার করা হয়। <polyline> এলিমেন্টটি সোজা রেখা দিয়ে বने একটি আকৃতি তৈরি করে। points অ্যাট্রিবিউটে প্রতিটি কোণার 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-এ পলিলাইন কীভাবে আঁকবেন?

দ্রষ্টব্য: <polyline> এবং <polygon>-এর পার্থক্য হলো পলিলাইন ওপেন শেপ তৈরি করে (শেষ পয়েন্ট প্রথম পয়েন্টের সাথে জড়িত হয় না), কিন্তু পলিগন ক্লোজড শেপ তৈরি করে।