HTML5 SVG-এ বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র কীভাবে তৈরি করবেন?

HTML5 SVG-এ বৃত্তাকোণবিশিষ্ট আয়তক্ষেত্র আঁকার পদ্ধতি

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

HTML SVG-এ আয়তক্ষেত্র আঁকতে SVG <rect> এলিমেন্ট ব্যবহার করা হয়। কোণগুলো বৃত্তাকার করতে rx এবং ry অ্যাট্রিবিউট সেট করতে হবে, যা আয়তক্ষেত্রের কোণগুলো বৃত্তাকার করে দেয়।

উদাহরণ

নিচের কোডটি চালিয়ে 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>SVG</title>
  </head>
  <body>
    <h2>HTML5 SVG Rectangle</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <rect x="50" y="20" rx="30" ry="30" width="150" height="150" style="fill:blue;" />
    </svg>
  </body>
</html>

ব্যাখ্যা: এখানে rx এবং ry দ উভয়ই 30 সেট করা হয়েছে, ফলে আয়তক্ষেত্রের চারদিকের কোণ সমানভাবে বৃত্তাকার হয়েছে। আপনি rx এবং ry-র মান আলাদা করে দিলে অন্ডাকার আকৃতিও তৈরি করতে পারেন।