SVG <rect>

SVG có một số yếu tố hình dạng được định nghĩa sẵn, mà các nhà phát triển có thể sử dụng và thao tác.

Hình dạng SVG

SVG có một số yếu tố hình dạng được định nghĩa sẵn mà các nhà phát triển có thể sử dụng và thao tác:

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

Các chương tiếp theo sẽ giải thích cho bạn những yếu tố này, bắt đầu từ yếu tố hình vuông.

Thẻ <rect>

Thẻ <rect> dùng để tạo hình vuông và các biến thể của hình vuông.

Để hiểu nguyên lý hoạt động của nó, hãy sao chép mã này vào một bản ghi nhớ và lưu dưới tên tệp "rect1.svg". Đặt tệp này vào thư mục web:

<?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">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Giải thích mã:

  • Thuộc tính width và height của phần tử rect có thể định nghĩa chiều cao và chiều rộng của hình vuông
  • Thuộc tính style dùng để định nghĩa thuộc tính CSS
  • Thuộc tính fill của CSS định nghĩa màu lấp đầy của hình vuông (giá trị rgb, tên màu hoặc giá trị hex)
  • Thuộc tính stroke-width của CSS định nghĩa độ rộng của viền hình vuông
  • Thuộc tính stroke của CSS định nghĩa màu của viền hình vuông

Xem ví dụ này

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

<?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">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Giải thích ví dụ:

  • Thuộc tính x định nghĩa vị trí bên trái của hình vuông (ví dụ, x="0" định nghĩa khoảng cách từ hình vuông đến bên trái cửa sổ trình duyệt là 0px)
  • Thuộc tính y định nghĩa vị trí trên cùng của hình vuông (ví dụ, y="0" định nghĩa khoảng cách từ hình vuông đến đỉnh cửa sổ trình duyệt là 0px)
  • Thuộc tính fill-opacity của CSS định nghĩa độ trong suốt của màu lấp đầy (phạm vi hợp lệ là: 0 - 1)
  • Thuộc tính stroke-opacity của CSS định nghĩa độ trong suốt của màu bút chì (phạm vi hợp lệ là: 0 - 1)

Xem ví dụ

Định nghĩa độ trong suốt cho toàn bộ yếu tố:

<?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">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Giải thích mã:

Thuộc tính opacity của CSS xác định giá trị trong suốt của toàn bộ phần tử (phạm vi hợp lệ là: 0 - 1)

Xem ví dụ

Ví dụ cuối cùng, tạo hình vuông có góc trò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">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Giải thích mã:

Các thuộc tính rx và ry có thể tạo góc tròn cho hình vuông.

Xem ví dụ