วิธีวาดวงรีทับซ้อนกันใน HTML5 SVG

บทนำ

ใช้แท็ก <ellipse> สำหรับวาดวงรีใน SVG โดยระบุ:

• cx, cy = พิกัดศูนย์กลาง
• rx, ry = รัศมีแกน X และแกน Y

ในการวาดวงรีทับซ้อนกัน ให้กำหนดพิกัดและขนาดให้เหมาะสม

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

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

เทคนิคการทับซ้อน

ใช้ fill-opacity เพื่อทำให้โปร่งแสงเห็นทะลุ ใช้ z-index หรือลำดับในโค้ด (ตัวหลังทับตัวหน้า) ปรับ cx, cy ให้ศูนย์กลางใกล้กันเพื่อเอฟเฟกต์ทับซ้อน