<stop>
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.
<stop> SVG định nghĩa một màu và vị trí của nó để dùng trên một gradient. Phần tử này luôn là phần tử con của <linearGradient> hoặc <radialGradient>.
Ngữ cảnh sử dụng
Thuộc tính
offset-
Thuộc tính này xác định điểm dừng gradient được đặt ở đâu dọc theo vectơ gradient. Kiểu giá trị: <number> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có stop-color-
Thuộc tính này xác định màu của điểm dừng gradient. Nó có thể được dùng như một thuộc tính CSS. Kiểu giá trị: <color>; Giá trị mặc định:
black; Có thể hoạt ảnh: có stop-opacity-
Thuộc tính này xác định độ mờ của điểm dừng gradient. Nó có thể được dùng như một thuộc tính CSS. Kiểu giá trị: <opacity-value>; Giá trị mặc định:
1; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGStopElement.
Ví dụ
<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>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StopElement |