Các fillbất động sản trong CSS là dành cho điền vào màu sắc của một hình dạng SVG.
.eyeball ( fill: red; )Nhớ lại:
- Điều này sẽ ghi đè một thuộc tính trình bày
- Điều này sẽ không ghi đè một kiểu nội tuyến, ví dụ:
Giá trị
Các fillbất động sản có thể chấp nhận bất kỳ giá trị màu CSS.
- Màu được đặt tên -
orange - Màu hệ lục phân -
#FF9E2C - Màu RGB và RGBa -
rgb(255, 158, 44)vàrgba(255, 158, 44, .5) - Màu HSL và HSLa -
hsl(32, 100%, 59%)vàhsla(32, 100%, 59%, .5)
Như một phần thưởng, fillcũng chấp nhận các mẫu hình dạng SVG được xác định bên trong một defsphần tử:
.module ( fill: url(#pattern); )Xem thuộc tính Pen fill của CSS-Tricks (@ css-trick) trên CodePen.
Một trường hợp sử dụng
Một trường hợp sử dụng phổ biến filllà thay đổi màu sắc của SVG khi di chuột, giống như chúng ta làm colorkhi tạo kiểu di chuột qua liên kết.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Xem thuộc tính Pen fill của CSS-Tricks (@ css-trick) trên CodePen.
Một trường hợp sử dụng khác
Các fillbất động sản là một trong nhiều lý do SVG là một lựa chọn nhiều linh hoạt hơn tập tin hình ảnh điển hình. Hãy lấy các biểu tượng làm ví dụ.
Chúng ta có thể có cùng một bộ biểu tượng nhưng ở hai cách phối màu khác nhau. Các tệp hình ảnh điển hình (chẳng hạn như JPG.webp, PNG và GIF) sẽ yêu cầu chúng tôi tạo hai phiên bản của mỗi biểu tượng - một phiên bản cho mỗi bảng màu.
Mặt khác, SVG cho phép chúng tôi vẽ các biểu tượng bằng cách sử dụng thuộc tính CSS fill:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Bây giờ chúng ta có thể sử dụng lại cùng một tệp SVG cho nhiều tình huống bằng cách thay đổi tên lớp của đường dẫn hoặc hình dạng:
Xem thuộc tính Pen fill của CSS-Tricks (@ css-trick) trên CodePen.
Thêm thông tin
- Thông số SVG 1.1
- MDN về điền và vuốt
- Xếp tầng SVG Tô màu
- SVG Fill Patterns của Jacob Jenkov
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Đúng | Đúng | Đúng | Đúng | 9+ | 4.4+ | Đúng |