SVG <rect>

SVG Shapes

SVG có một số yếu tố hình dạng được xác định trước có thể được sử dụng bởi các nhà phát triển:

• Hình chữ nhật <thẳng>
• Vòng tròn <hình tròn>
• Hình elip <ellipse>
• Dòng <dòng>
• Polyline <polyline>
• Polygon <polygon>
• Đường dẫn <path>

Các chương sau sẽ giải thích từng phần tử, bắt đầu với phần tử trực tràng.

SVG Rectangle - <rect>

ví dụ 1

Phần tử <rect> được sử dụng để tạo hình chữ nhật và các biến thể của hình chữ nhật:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính chiều rộng và chiều cao của phần tử <rect> xác định chiều cao và chiều rộng của hình chữ nhật
• Thuộc tính style được sử dụng để xác định thuộc tính CSS cho hình chữ nhật
• Thuộc tính điền CSS xác định màu tô của hình chữ nhật
• Thuộc tính CSS stroke-width xác định chiều rộng của đường viền của hình chữ nhật
• Thuộc tính nét vẽ CSS xác định màu của đường viền của hình chữ nhật

Ví dụ 2

Hãy xem một ví dụ khác có chứa một số thuộc tính mới:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính x xác định vị trí bên trái của hình chữ nhật (ví dụ: x = "50" đặt hình chữ nhật cách lề trái 50 px)
• Thuộc tính y xác định vị trí trên cùng của hình chữ nhật (ví dụ: y = "20" đặt hình chữ nhật cách lề trên cùng 20 px)
• Thuộc tính fill-opacity CSS xác định độ mờ của màu tô (phạm vi hợp pháp: 0 đến 1)
• Thuộc tính CSS stroke-opacity xác định độ mờ của màu nét (phạm vi hợp pháp: 0 đến 1)

Ví dụ 3

Xác định độ mờ cho toàn bộ phần tử:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính opacity của CSS xác định giá trị độ mờ cho toàn bộ phần tử (phạm vi hợp pháp: 0 đến 1)

Ví dụ 4

Ví dụ cuối cùng, tạo một hình chữ nhật với các góc được làm tròn:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính rx và ry làm tròn các góc của hình chữ nhật