fill-opacity
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Thuộc tính trình bày fill-opacity định nghĩa độ mờ của paint server (màu, gradient, pattern, v.v.) được áp dụng cho một hình dạng.
Note:
Là một thuộc tính trình bày, fill-opacity cũng có một thuộc tính CSS tương ứng: fill-opacity. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- Default fill opacity: 1 -->
<circle cx="50" cy="50" r="40" />
<!-- Fill opacity as a number -->
<circle cx="150" cy="50" r="40" fill-opacity="0.7" />
<!-- Fill opacity as a percentage -->
<circle cx="250" cy="50" r="40" fill-opacity="50%" />
<!-- Fill opacity as a CSS property -->
<circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
Ghi chú sử dụng
| Giá trị |
[0-1] |
<percentage>
|
|---|---|
| Giá trị mặc định | 1 |
| Có thể animate | Có |
Note:
SVG2 giới thiệu các giá trị phần trăm cho fill-opacity, tuy nhiên hiện nó chưa được hỗ trợ rộng rãi (xem Tương thích trình duyệt bên dưới). Vì vậy, thực hành tốt nhất là đặt độ mờ bằng một giá trị trong phạm vi [0-1].
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # FillOpacity |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
fill-opacity opacitystop-opacitystroke-opacity