কম্পিউটার টিউটোরিয়াল

HTML5 SVG-এ বৃত্ত (Circle) আঁকা


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

HTML SVG-এ বৃত্ত আঁকতে SVG <circle> এলিমেন্ট ব্যবহার করা হয়।

HTML5 SVG-এ বৃত্ত (Circle) আঁকা

উদাহরণ

নিচের কোড চালিয়ে 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 Circle</title>    </head>    <body>       <h2>HTML5 SVG বৃত্ত</h2>       <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">          <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />       </svg>    </body> </html>

আউটপুট

HTML5 SVG-এ বৃত্ত (Circle) আঁকা


  1. HTML পেজে বৃত্ত কীভাবে আঁকবেন?

  2. SVG-এ ফাঁকা বৃত্ত কীভাবে আঁকবেন?

  3. HTML5-এ SVG ইমেজ ব্যবহারের পদ্ধতি

  4. HTML5-এ arc() ব্যবহার করে বৃত্ত আঁকার পদ্ধতি