Cách vẽ các elip chồng lên nhau trong HTML5 SVG

SVG dùng phần tử <ellipse> để vẽ elip. Để vẽ nhiều elip chồng lên nhau, chỉ cần đặt nhiều thẻ <ellipse> với tọa độ phù hợp; elip khai báo sau sẽ hiển thị đè lên elip trước.

Ví dụ

Mã sau vẽ hai elip chồng nhau, màu xanh lá và vàng:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 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>

Thuộc tính chính: cx, cy – tâm elip; rx, ry – bán kính theo trục X, Y.