y1
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.
Thuộc tính y1 được dùng để chỉ định tọa độ y thứ nhất cho việc vẽ một phần tử SVG cần nhiều hơn một tọa độ. Những phần tử chỉ cần một tọa độ sẽ dùng thuộc tính y thay thế.
Phần tử
Bạn có thể dùng thuộc tính này với các phần tử SVG được mô tả trong các phần bên dưới.
<line>
Với <line>, y1 xác định tọa độ y của điểm bắt đầu của đường thẳng.
| Giá trị | <length> | <percentage> | <number> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể hoạt ảnh | Có |
html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<line x1="1" x2="9" y1="1" y2="5" stroke="red" />
<line x1="1" x2="9" y1="5" y2="5" stroke="green" />
<line x1="1" x2="9" y1="9" y2="5" stroke="blue" />
</svg>
<linearGradient>
Với <linearGradient>, y1 xác định tọa độ y của điểm bắt đầu của vector gradient dùng để ánh xạ các giá trị điểm dừng gradient. Hành vi chính xác của thuộc tính này bị ảnh hưởng bởi thuộc tính gradientUnits.
| Giá trị | <length> |
|---|---|
| Giá trị mặc định | 0% |
| Có thể hoạt ảnh | Có |
html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<!--
Theo mặc định, vector gradient bắt đầu ở góc trên bên trái
của hộp giới hạn của hình dạng mà nó được áp dụng.
-->
<linearGradient y1="0%" id="g0">
<stop offset="5%" stop-color="black" />
<stop offset="50%" stop-color="red" />
<stop offset="95%" stop-color="black" />
</linearGradient>
<rect x="1" y="1" width="8" height="8" fill="url(#g0)" />
<!--
Ở đây vector gradient bắt đầu ở góc dưới bên trái
của hộp giới hạn của hình dạng mà nó được áp dụng.
-->
<linearGradient y1="100%" id="g1">
<stop offset="5%" stop-color="black" />
<stop offset="50%" stop-color="red" />
<stop offset="95%" stop-color="black" />
</linearGradient>
<rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>
Ví dụ
html
<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<line x1="2" x2="22" y1="0" y2="20" stroke="red" />
<line x1="2" x2="22" y1="10" y2="20" stroke="green" />
<line x1="2" x2="22" y1="20" y2="20" stroke="blue" />
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementY1Attribute |