SVG <rect>

Hình dạng SVG

SVG có một số phần tử hình đã định trước mà nhà phát triển có thể sử dụng:

  • Hình vuông <rect>
  • Hình tròn <circle>
  • Hình tròn elip <ellipse>
  • Đường thẳng <line>
  • Đường gấp <polyline>
  • Đa giác <polygon>
  • Đường dẫn <path>

Chương tiếp theo sẽ bắt đầu từ phần elemen rect để giải thích từng phần tử.

SVG hình vuông - <rect>

Ví dụ 1

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

Xin lỗi, trình duyệt của bạn không hỗ trợ SVG trong dòng.

Đây là mã SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Thử ngay

Giải thích mã:

  • Thuộc tính width và height của phần tử <rect> xác định chiều cao và chiều rộng của hình vuông
  • Thuộc tính style được sử dụng để xác định thuộc tính CSS của hình vuông
  • Thuộc tính fill của CSS xác định màu lấp đầy của hình vuông
  • Thuộc tính border-width của CSS xác định độ rộng của viền hình vuông
  • Thuộc tính stroke của CSS xác định màu viền của hình vuông

Ví dụ 2

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

Đây là mã SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Thử ngay

Giải thích mã:

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

Ví dụ 3

Xác định không mờ của toàn bộ phần tử:

Đây là mã SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Thử ngay

Giải thích mã:

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

Ví dụ 4

Ví dụ cuối cùng, tạo hình vuông có góc tròn:

Đây là mã SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Thử ngay

Giải thích mã:

  • Thuộc tính rx và ry làm góc vuông tròn