SVG <dòng>
Dòng SVG - <dòng>
Phần tử <line>
được sử dụng để tạo một dòng.
Phần tử <line>
tạo một đường thẳng giữa vị trí bắt đầu (x1,y1) và vị trí kết thúc (x2,y2).
Phần tử <line>
có bốn thuộc tính cơ bản để định vị và thiết lập độ dài của dòng:
Attribute | Description |
---|---|
x1 | The start of the line on the x-axis |
y1 | The start of the line on the y-axis |
x2 | The end of the line on the x-axis |
y2 | The end of the line on the y-axis |
Một dòng SVG
Ví dụ sau tạo một dòng từ vị trí (0,0) đến (300.200):
Đây là mã SVG:
Ví dụ
<svg height="200" width="300" xmlns="https://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="200" style="stroke:red;stroke-width:2" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
<x1>
và<y1>
xác định điểm bắt đầu của dòng (0,0) - Thuộc tính
<x2>
và<y2>
xác định điểm cuối dòng (300.200)
Một đường ngang
Ví dụ sau tạo một đường ngang dày từ vị trí (0,10) đến (250,10):
Đây là mã SVG:
Ví dụ
<svg height="50" width="300" xmlns="https://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
<x1>
và<y1>
xác định điểm bắt đầu của dòng (0,10) - Thuộc tính
<x2>
và<y2>
xác định điểm cuối dòng (250,10)
Một đường thẳng đứng
Ví dụ sau tạo một đường thẳng đứng dày từ vị trí (0,0) đến (0,200):
Đây là mã SVG:
Ví dụ
<svg height="210" width="300" xmlns="https://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
<x1>
và<y1>
xác định điểm bắt đầu của dòng (0,0) - Thuộc tính
<x2>
và<y2>
xác định điểm cuối dòng (0,200)