<rect>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

<rect> SVG là một hình dạng SVG cơ bản dùng để vẽ hình chữ nhật, được xác định bởi vị trí, chiều rộng và chiều cao. Các hình chữ nhật có thể được bo tròn các góc.

Ngữ cảnh sử dụng

Categories	Basic shape element, Graphics element, Shape element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements

Thuộc tính

x: Tọa độ x của hình chữ nhật. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh: có
y: Tọa độ y của hình chữ nhật. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh: có
width: Chiều rộng của hình chữ nhật. Kiểu giá trị: auto | <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có
height: Chiều cao của hình chữ nhật. Kiểu giá trị: auto | <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có
rx: Bán kính góc theo phương ngang của hình chữ nhật. Mặc định là ry nếu thuộc tính đó được chỉ định. Kiểu giá trị: auto | <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có
ry: Bán kính góc theo phương dọc của hình chữ nhật. Mặc định là rx nếu thuộc tính đó được chỉ định. Kiểu giá trị: auto | <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có
pathLength: Tổng chiều dài chu vi của hình chữ nhật, tính theo đơn vị người dùng. Kiểu giá trị: <number>; Giá trị mặc định: không có; Có thể hoạt ảnh: có

Note: Từ SVG2, x, y, width, height, rx và ry là Geometry Properties, nghĩa là các thuộc tính này cũng có thể được dùng như thuộc tính CSS cho phần tử đó.

Giao diện DOM

Phần tử này triển khai giao diện SVGRectElement.

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Regular rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

Đặc tả

Specification
Scalable Vector Graphics (SVG) 2 # RectElement

Tương thích trình duyệt

Xem thêm

Thuộc tính trình bày SVG bao gồm fill và stroke
Các hình dạng SVG cơ bản khác: <circle>, <ellipse>, <line>, <polygon>, <polyline>

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content