fillNemovitost v CSS je pro vyplnění v barvě tvaru SVG.
.eyeball ( fill: red; )Pamatovat si:
- To bude přepsat atribut prezentační
- To nebude přepsat inline stylu např
Hodnoty
fillNemovitost může přijmout jakoukoliv barvu CSS hodnotu.
- Pojmenované barvy -
orange - Hex barvy -
#FF9E2C - Barvy RGB a RGBa -
rgb(255, 158, 44)argba(255, 158, 44, .5) - Barvy HSL a HSLa -
hsl(32, 100%, 59%)ahsla(32, 100%, 59%, .5)
Jako bonus filltaké přijímá vzory tvarů SVG, které jsou definovány uvnitř defsprvku:
.module ( fill: url(#pattern); )Podívejte se na vlastnost Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Případ použití
Běžným případem použití fillje změna barvy SVG při přechodu myší, podobně jako colorpři přechodu stylingového odkazu.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Podívejte se na vlastnost Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Další případ použití
Tato fillvlastnost je jedním z mnoha důvodů, proč je SVG mnohem flexibilnější možností než typické obrazové soubory. Vezměme si jako příklad ikony.
Možná máme stejnou sadu ikon, ale ve dvou různých barevných schématech. Typické obrazové soubory (jako JPG.webp, PNG a GIF) by vyžadovaly, abychom vytvořili dvě verze každé ikony - jednu pro každé barevné schéma.
Na druhou stranu SVG nám umožňuje malovat ikony pomocí vlastnosti CSS fill:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nyní můžeme změnit použití stejného souboru SVG pro více scénářů změnou názvu třídy cesty nebo tvaru:
Podívejte se na vlastnost Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Více informací
- SVG 1.1 Spec
- MDN pro výplně a tahy
- Kaskádová barva výplně SVG
- SVG výplňové vzory od Jacoba Jenkova
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Ano | Ano | Ano | Ano | 9+ | 4,4+ | Ano |