gradientUnits
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính gradientUnits xác định hệ tọa độ được dùng cho các thuộc tính được chỉ định trên các phần tử gradient.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
linearGradient
Với <linearGradient>, gradientUnits xác định hệ tọa độ được dùng cho các thuộc tính x1, y1, x2, và y2.
| Giá trị | userSpaceOnUse | objectBoundingBox |
|---|---|
| Giá trị mặc định | objectBoundingBox |
| Có thể hoạt ảnh | Có |
userSpaceOnUse-
Giá trị này cho biết các thuộc tính biểu thị các giá trị trong hệ tọa độ thu được bằng cách lấy hệ tọa độ người dùng hiện tại tại thời điểm phần tử gradient được tham chiếu (tức là hệ tọa độ người dùng của phần tử tham chiếu tới phần tử gradient thông qua thuộc tính
fillhoặcstroke) rồi áp dụng phép biến đổi được chỉ định bởi thuộc tínhgradientTransform. Các giá trị phần trăm biểu thị giá trị tương đối so với viewport SVG hiện tại. objectBoundingBox-
Giá trị này cho biết hệ tọa độ người dùng cho các thuộc tính được thiết lập bằng cách dùng khung bao của phần tử mà gradient được áp dụng rồi áp dụng phép biến đổi được chỉ định bởi thuộc tính
gradientTransform.Các giá trị phần trăm biểu thị giá trị tương đối so với khung bao của đối tượng.
Với giá trị này và
gradientTransformlà ma trận đơn vị, pháp tuyến của linear gradient vuông góc với vector gradient trong không gian object bounding box (tức hệ tọa độ trừu tượng nơi (0,0) ở góc trên/trái của khung bao đối tượng và (1,1) ở góc dưới/phải của khung bao đối tượng). Khi khung bao của đối tượng không phải hình vuông, pháp tuyến gradient vốn ban đầu vuông góc với vector gradient trong không gian object bounding box có thể được hiển thị không vuông góc tương đối với vector gradient trong không gian người dùng. Nếu vector gradient song song với một trong các trục của khung bao, pháp tuyến gradient sẽ vẫn vuông góc. Sự biến đổi này là do phép biến đổi co giãn không đồng đều từ không gian khung bao sang không gian người dùng.
radialGradient
Với <radialGradient>, gradientUnits xác định hệ tọa độ được dùng cho các thuộc tính cx, cy, r, fx, fy, và fr.
| Giá trị | userSpaceOnUse | objectBoundingBox |
|---|---|
| Giá trị mặc định | objectBoundingBox |
| Có thể hoạt ảnh | Có |
userSpaceOnUse-
cx,cy,r,fx,fy, vàfrbiểu thị các giá trị trong hệ tọa độ thu được bằng cách lấy hệ tọa độ người dùng hiện tại tại thời điểm phần tử gradient được tham chiếu (tức là hệ tọa độ người dùng của phần tử tham chiếu gradient qua thuộc tínhfillhoặcstroke) rồi áp dụng phép biến đổi được chỉ định bởi thuộc tínhgradientTransform. objectBoundingBox-
Đối với
<radialGradient>, hệ tọa độ người dùng cho các thuộc tínhcx,cy,r,fx,fy, vàfrđược thiết lập bằng cách dùng khung bao của phần tử mà gradient được áp dụng (xem Object bounding box units) rồi áp dụng phép biến đổi được chỉ định bởi thuộc tínhgradientTransform. Với giá trị này vàgradientTransformlà ma trận đơn vị, các vòng của radial gradient là hình tròn tương đối với không gian object bounding box (tức hệ tọa độ trừu tượng nơi (0,0) ở góc trên/trái của khung bao đối tượng và (1,1) ở góc dưới/phải của khung bao đối tượng). Khi khung bao của đối tượng không phải hình vuông, các vòng vốn được xem là hình tròn trong không gian object bounding box sẽ được hiển thị thành hình elip do áp dụng phép biến đổi co giãn không đồng đều từ không gian khung bao sang không gian người dùng.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2> # LinearGradientElementGradientUnitsAttribute> |
| Scalable Vector Graphics (SVG) 2> # RadialGradientElementGradientUnitsAttribute> |