Cách sử dụng thẻ <rect> để tạo hình chữ nhật trong SVG trong HTML

Trong thao tác với hình ảnh đồ họa vector (SVG - Scalable Vector Graphics) trên website, thẻ <rect> là một trong những công cụ hữu ích để tạo ra các hình chữ nhật. Điều này không chỉ làm trang web thêm phần bắt mắt mà còn giúp truyền đạt thông tin một cách trực quan. Dưới đây là hướng dẫn chi tiết về cách áp dụng thẻ này.

Khởi đầu với SVG

Trước khi sử dụng thẻ <rect>, bạn cần khai báo không gian SVG trong file HTML. Việc khai báo này giúp trình duyệt hiểu rằng bạn đang làm việc với đồ họa vector.

<svg width="500" height="500">
  <!-- Nội dung SVG sẽ được đặt ở đây -->
</svg>

Cấu trúc của thẻ <rect>

Thẻ <rect> trong SVG được sử dụng để vẽ các hình chữ nhật và hình vuông. Thông thường, nó cần có các thuộc tính cơ bản như x, y, width, height`, và các thuộc tính bổ sung để định dạng hình ảnh:

• x và y: Xác định tọa độ bắt đầu của góc trên bên trái của hình chữ nhật.
• width: Chiều rộng của hình chữ nhật.
• height: Chiều cao của hình chữ nhật.
• rx và ry: Tạo độ bo tròn cho các góc (tùy chọn).

Ví dụ cơ bản về hình chữ nhật

Sau khi khai báo không gian SVG, bạn có thể thêm thẻ <rect> để vẽ hình chữ nhật. Dưới đây là một ví dụ cụ thể:

<svg width="500" height="500">
  <rect x="50" y="50" width="200" height="100" fill="blue" />
</svg>

Trong đoạn mã trên:

• Tọa độ của góc trên bên trái là (50, 50).
• Chiều rộng và chiều cao lần lượt là 200 và 100.
• Thuộc tính fill được sử dụng để đặt màu nền cho hình chữ nhật.

Tạo độ bo tròn cho các góc

Để làm hình chữ nhật mềm mại hơn bằng cách bo tròn các góc, bạn có thể sử dụng các thuộc tính rx và ry:

<svg width="500" height="500">
  <rect x="50" y="50" width="200" height="100" rx="20" ry="20" fill="green" />
</svg>

Thuộc tính rx và ry trong ví dụ này sẽ bo tròn các góc với bán kính 20.

Thêm viền và các thuộc tính bổ sung

Ngoài thuộc tính fill, bạn có thể đặt viền (stroke) và cấu hình thêm các thuộc tính khác:

<svg width="500" height="500">
  <rect x="50" y="50" width="200" height="100" fill="yellow" stroke="black" stroke-width="5" />
</svg>

• stroke: Màu viền.
• stroke-width: Độ dày của viền.

Kết hợp nhiều hình chữ nhật

Bạn có thể kết hợp nhiều hình chữ nhật để tạo ra các bố cục phức tạp hơn:

<svg width="500" height="500">
  <rect x="10" y="10" width="200" height="100" fill="red" />
  <rect x="220" y="10" width="200" height="100" fill="blue" />
  <rect x="10" y="120" width="410" height="50" fill="green" />
</svg>

Với ví dụ trên, mỗi hình chữ nhật có tọa độ và kích thước khác nhau, tạo ra một bố cục thú vị.

Kết luận

Việc sử dụng thẻ <rect> để tạo ra hình chữ nhật trong SVG không chỉ đơn giản mà còn rất linh hoạt, hỗ trợ nhiều tùy chỉnh. Bạn có thể thay đổi kích thước, vị trí, màu sắc và thậm chí thêm viền hoặc bo tròn các góc để phù hợp với thiết kế của mình. Việc áp dụng thành thạo các kỹ thuật này chắc chắn sẽ mang lại lợi ích lớn cho việc thiết kế web của bạn.