HTML5 SVG-এ একে অপরের ওপর উপবৃত্ত কীভাবে আঁকবেন?

HTML5 SVG-এ একে অপরের ওপর উপবৃত্ত আঁকার পদ্ধতি

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

HTML SVG-এ উপবৃত্ত আঁকতে SVG <ellipse> এলিমেন্ট ব্যবহার করা হয়। একে অপরের ওপর উপবৃত্ত আঁকতে কোঅর্ডিনেটগুলো সঠিকভাবে সেট করতে হবে।

উদাহরণ

নিচের কোডটি চালিয়ে 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 Ellipse</title>
  </head>
  <body>
    <h2>HTML5 SVG Ellipse</h2>
    <svg id="svgelem" width="500" height="200" xmlns="https://www.w3.org/2000/svg">
      <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:green" />
      <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:yellow" />
    </svg>
  </body>
</html>

আউটপুট

HTML5 SVG-এ একে অপরের ওপর উপবৃত্ত কীভাবে আঁকবেন?

ব্যাখ্যা: প্রথম উপবৃত্তটি বড় এবং নিচে অবস্থিত (cy=100), দ্বিতীয়টি ছোট এবং উপরে অবস্থিত (cy=70)। cx হলো কেন্দ্রের x-কোঅর্ডিনেট, cy হলো y-কোঅর্ডিনেট, rx হলো x-ত্রিজ্যা, আর ry হলো y-ত্রিজ্যা।