SVG <ellipse>

Thẻ <ellipse> được sử dụng để tạo hình tròn.

Thẻ <ellipse>

Thẻ <ellipse> được sử dụng để tạo hình tròn. Hình tròn rất giống với hình tròn. Khác biệt duy nhất là hình tròn có bán kính x và y khác nhau, trong khi bán kính x và y của hình tròn là giống nhau.

Vui lòng sao chép mã dưới đây vào sổ ghi chú, sau đó lưu tệp dưới tên "ellipse1.svg". Đặt tệp này vào thư mục web của bạn:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

Giải thích mã:

  • Thuộc tính cx xác định tọa độ x của điểm tròn
  • Thuộc tính cy xác định tọa độ y của điểm tròn
  • Thuộc tính rx xác định bán kính ngang
  • Thuộc tính ry xác định bán kính đứng

Xem ví dụ

Dưới đây là ví dụ tạo ba hình tròn trùng lên nhau:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>

Xem ví dụ

Ví dụ sau này kết hợp hai hình elip (một vàng và một trắng):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>

Xem ví dụ