วิธีวาดวงรีใน HTML5 SVG

บทนำ

แท็ก <ellipse> ใช้สำหรับวาดวงรีใน SVG พารามิเตอร์หลัก:

• cx, cy = พิกัดศูนย์กลาง
• rx, ry = รัศมีแนวนอนและแนวตั้ง
• fill = สีเติม

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem { position: relative; left: 10%; transform: translateX(-20%); }
    </style>
    <title>HTML5 SVG Ellipse</title>
  </head>
  <body>
    <h2>HTML5 SVG Ellipse</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <ellipse cx="120" cy="50" rx="100" ry="50" fill="blue" />
    </svg>
  </body>
</html>

ความแตกต่าง Circle vs Ellipse

• Circle - ใช้ <circle> มีรัศมีเดียว r
• Ellipse - ใช้ <ellipse> มีรัศมี 2 ค่า rx, ry