fillNieruchomość w CSS jest do wypełnienia w kolorze kształcie SVG.
.eyeball ( fill: red; )Zapamiętaj:
- Spowoduje to zastąpienie atrybutu prezentacji
- Nie spowoduje to zastąpienia stylu wbudowanego, np
Wartości
fillNieruchomość może przyjąć dowolną wartość koloru CSS.
- Nazwane kolory -
orange - Kolory Hex -
#FF9E2C - Kolory RGB i RGBa -
rgb(255, 158, 44)irgba(255, 158, 44, .5) - Kolory HSL i HSLa -
hsl(32, 100%, 59%)ihsla(32, 100%, 59%, .5)
Jako bonus fillakceptuje również wzorce kształtów SVG, które są zdefiniowane wewnątrz defselementu:
.module ( fill: url(#pattern); )Zobacz właściwość Pen fill autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Przykład użycia
Typowym przypadkiem użycia dla filljest zmiana koloru SVG po najechaniu myszą, podobnie jak robimy to colorpodczas stylizacji linków.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Zobacz właściwość Pen fill autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Inny przypadek użycia
Ta fillwłaściwość jest jednym z wielu powodów, dla których SVG jest opcją znacznie bardziej elastyczną niż typowe pliki graficzne. Jako przykład weźmy ikony.
Możemy mieć ten sam zestaw ikon, ale w dwóch różnych schematach kolorów. Typowe pliki graficzne (takie jak JPG.webp, PNG i GIF) wymagałyby stworzenia dwóch wersji każdej ikony - po jednej dla każdego schematu kolorów.
Z drugiej strony SVG pozwala nam malować ikony za pomocą fillwłaściwości CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Teraz możemy zmienić przeznaczenie tego samego pliku SVG dla wielu scenariuszy, zmieniając nazwę klasy ścieżki lub kształtu:
Zobacz właściwość Pen fill autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Więcej informacji
- SVG 1.1 Spec
- MDN na wypełnienia i obrysy
- Kaskadowy kolor wypełnienia SVG
- Wzory wypełnienia SVG autorstwa Jacoba Jenkova
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| tak | tak | tak | tak | 9+ | 4.4+ | tak |