HTML5 SVG में सर्कल (वृत्त) कैसे ड्रॉ करें?

SVG <circle> एलिमेंट

SVG (Scalable Vector Graphics) XML-आधारित 2D ग्राफिक्स लैंग्वेज है। HTML5 में <svg> कंटेनर के अंदर <circle> एलिमेंट से वृत्त बनाएं।

<circle> के एट्रिब्यूट्स:

• cx - केंद्र का X निर्देशांक
• cy - केंद्र का Y निर्देशांक
• r - त्रिज्या (रेडियस)
• fill - भराव रंग

उदाहरण

<!DOCTYPE html> <html>
  <head>
    <style>
      #svgelem { position: relative; left: 10%; transform: translateX(-20%); }
    </style>
    <title>HTML5 SVG Circle</title>
  </head>
  <body>
    <h2>HTML5 SVG Circle</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>