SVG <trực tràng>
Hình dạng SVG
SVG có một số thành phần hình dạng được xác định trước mà các nhà phát triển có thể sử dụng:
- Hình chữ nhật
<rect>
tràng> - Vòng tròn
<circle>
- Hình elip
<ellipse>
- Dòng
<line>
- Đa tuyến
<polyline>
- Đa giác
<polygon>
- Đường dẫn
<path>
đường dẫn>
Các chương sau sẽ giải thích từng phần tử, bắt đầu bằng phần tử <rect>
.
Hình chữ nhật SVG - <trực tràng>
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.
Phần tử <rect>
có sáu thuộc tính cơ bản để định vị và định hình hình chữ nhật:
Attribute | Description |
---|---|
width | Required. The width of the rectangle |
height | Required. The height of the rectangle |
x | The x-position for the top-left corner of the rectangle |
y | The y-position for the top-left corner of the rectangle |
rx | The x radius of the corners of the rectangle (used to round the corners). Default is 0 |
ry | The y radius of the corners of the rectangle (used to round the corners). Default is 0 |
Một hình chữ nhật SVG
Ví dụ này tạo một hình chữ nhật với sáu thuộc tính cơ bản và màu tô:
Đây là mã SVG:
Ví dụ
<svg width="300" height="130" xmlns="https://www.w3.org/2000/svg">
<rect
width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>
Hãy tự mình thử »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 chữ nhật - Thuộc tính
x
vày
xác định vị trí x và y của góc trên cùng bên trái của hình chữ nhật (x="10" đặt hình chữ nhật cách lề trái 10px và y="10" đặt hình chữ nhật cách lề trên 10px ) trong khung vẽ SVG - Thuộc tính
rx
vàry
xác định bán kính các góc của hình chữ nhật - Thuộc tính
fill
xác định màu tô của hình chữ nhật
Một Hình Chữ Nhật Có Viền
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:
Ví dụ
<svg width="320" height="130" xmlns="https://www.w3.org/2000/svg">
<rect width="300" height="100"
x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>
Hãy tự mình thử »Giải thích mã:
- 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 CSS
fill
xác định màu tô của hình chữ nhật - Thuộc tính CSS
stroke-width
xác định độ rộng của đường viền của hình chữ nhật - Thuộc tính
stroke
CSS xác định màu đường viền của hình chữ nhật
Một hình chữ nhật có độ mờ
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:
Ví dụ
<svg width="300" height="170" xmlns="https://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính CSS
fill-opacity
xác định độ mờ của màu tô (phạm vi pháp lý: 0 đến 1) - Thuộc tính CSS
stroke-opacity
xác định độ mờ của màu nét (phạm vi pháp lý: 0 đến 1)
Một hình chữ nhật khác có độ mờ
Xác định độ mờ cho toàn bộ phần tử:
Đây là mã SVG:
Ví dụ
<svg width="300" height="170" xmlns="https://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc
opacity
CSS xác định giá trị độ mờ cho toàn bộ phần tử (phạm vi pháp lý: 0 đến 1)
Một hình chữ nhật có các góc tròn
Ví dụ cuối cùng, tạo một hình chữ nhật có các góc tròn:
Đây là mã SVG:
Ví dụ
<svg width="300" height="170" xmlns="https://www.w3.org/2000/svg">
<rect width="150"
height="150" x="10" y="10" rx="20" ry="20"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Hãy tự mình thử »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