<linearGradient>
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.
Phần tử <linearGradient> của SVG cho phép tác giả định nghĩa các gradient tuyến tính để áp dụng cho các phần tử SVG khác.
Ngữ cảnh sử dụng
| Categories | Gradient element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements <animate>, <animateTransform>, <script>, <set>, <stop>, <style> |
Thuộc tính
gradientUnits-
Thuộc tính này xác định hệ tọa độ cho các thuộc tính
x1,x2,y1,y2Kiểu giá trị:userSpaceOnUse|objectBoundingBox; Giá trị mặc định:objectBoundingBox; Có thể hoạt ảnh: có gradientTransform-
Thuộc tính này cung cấp biến đổi bổ sung cho hệ tọa độ của gradient. Kiểu giá trị: <transform-list>; Giá trị mặc định: identity transform; Có thể hoạt ảnh: có
href-
Thuộc tính này xác định một tham chiếu tới một phần tử
<linearGradient>khác sẽ được dùng làm mẫu. Kiểu giá trị: <URL>; Giá trị mặc định: none; Có thể hoạt ảnh: có spreadMethod-
Thuộc tính này cho biết gradient hoạt động như thế nào nếu nó bắt đầu hoặc kết thúc bên trong ranh giới của hình chứa gradient. Kiểu giá trị:
pad|reflect|repeat; Giá trị mặc định:pad; Có thể hoạt ảnh: có x1-
Thuộc tính này xác định tọa độ x của điểm bắt đầu của vector gradient mà theo đó linear gradient được vẽ. Kiểu giá trị: <length>; Giá trị mặc định:
0%; Có thể hoạt ảnh: có x2-
Thuộc tính này xác định tọa độ x của điểm kết thúc của vector gradient mà theo đó linear gradient được vẽ. Kiểu giá trị: <length>; Giá trị mặc định:
100%; Có thể hoạt ảnh: có xlink:hrefĐã lỗi thời-
Một tham chiếu <IRI> tới một phần tử
<linearGradient>khác sẽ được dùng làm mẫu. Kiểu giá trị: <IRI>; Giá trị mặc định: none; Có thể hoạt ảnh: có y1-
Thuộc tính này xác định tọa độ y của điểm bắt đầu của vector gradient mà theo đó linear gradient được vẽ. Kiểu giá trị: <length>; Giá trị mặc định:
0%; Có thể hoạt ảnh: có y2-
Thuộc tính này xác định tọa độ y của điểm kết thúc của vector gradient mà theo đó linear gradient được vẽ. Kiểu giá trị: <length>; Giá trị mặc định:
0%; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGLinearGradientElement.
Ví dụ
Linear gradient cơ bản
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- dùng linear gradient của tôi -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Gradient nghiêng lặp lại
Trong ví dụ này, hai phần tử <rect> có tỷ lệ khung hình khác nhau, nhưng góc của gradient là như nhau.
<svg
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient
id="grad"
x1="0"
y1="0"
x2="20"
y2="20"
spreadMethod="repeat"
gradientUnits="userSpaceOnUse">
<stop offset="50%" stop-color="red" />
<stop offset="50%" stop-color="gold" />
</linearGradient>
</defs>
<rect width="100%" height="25%" fill="url(#grad)" />
<rect width="100%" height="65%" fill="url(#grad)" y="30%" />
</svg>
Đặc tả
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradientElement |