<radialGradient>
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ử <radialGradient> của SVG cho phép tác giả định nghĩa các gradient xuyên tâm có thể được áp dụng cho fill hoặc stroke của các phần tử đồ họa.
Note:
Đừng nhầm với CSS radial-gradient() vì các gradient CSS chỉ có thể áp dụng cho phần tử HTML, trong khi gradient SVG chỉ có thể áp dụng cho phần tử SVG.
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
cx-
Thuộc tính này xác định tọa độ x của hình tròn kết thúc của radial gradient. Kiểu giá trị: <length>; Giá trị mặc định:
50%; Có thể hoạt ảnh: có cy-
Thuộc tính này xác định tọa độ y của hình tròn kết thúc của radial gradient. Kiểu giá trị: <length>; Giá trị mặc định:
50%; Có thể hoạt ảnh: có fr-
Thuộc tính này xác định bán kính của hình tròn bắt đầu của radial gradient. Gradient sẽ được vẽ sao cho
<stop>0% được ánh xạ tới chu vi của hình tròn bắt đầu. Kiểu giá trị: <length>; Giá trị mặc định:0%; Có thể hoạt ảnh: có fx-
Thuộc tính này xác định tọa độ x của hình tròn bắt đầu của radial gradient. Kiểu giá trị: <length>; Giá trị mặc định: Giống
cx; Có thể hoạt ảnh: có fy-
Thuộc tính này xác định tọa độ y của hình tròn bắt đầu của radial gradient. Kiểu giá trị: <length>; Giá trị mặc định: Giống
cy; Có thể hoạt ảnh: có gradientUnits-
Thuộc tính này xác định hệ tọa độ cho các thuộc tính
cx,cy,r,fx,fy,frKiể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ử
<radialGradient>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ó r-
Thuộc tính này xác định bán kính của hình tròn kết thúc của radial gradient. Gradient sẽ được vẽ sao cho
<stop>100% được ánh xạ tới chu vi của hình tròn kết thúc. Kiểu giá trị: <length>; Giá trị mặc định:50%; 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ó xlink:hrefDeprecated-
Một tham chiếu <IRI> tới một phần tử
<radialGradient>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ó
Giao diện DOM
Phần tử này triển khai giao diện SVGRadialGradientElement.
Ví dụ
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="myGradient">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- dùng radial gradient của tôi -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElement |