Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để vẽ các hình elip chồng lên nhau trong HTML5 SVG?

SVG là viết tắt của Scalable Vector Graphics và là một ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được hiển thị bởi một trình xem SVG. Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG.

Để vẽ một hình elip trong HTML SVG, hãy sử dụng phần tử SVG . Để vẽ các hình elip chồng lên nhau, hãy đặt tọa độ đúng cách.

Làm cách nào để vẽ các hình elip chồng lên nhau trong HTML5 SVG?

Ví dụ

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ hai hình elip chồng lên nhau trong HTML5 SVG.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 20%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-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>

Đầu ra

Làm cách nào để vẽ các hình elip chồng lên nhau trong HTML5 SVG?