Fyll - CSS-tricks

Anonim

Den fillegendom i CSS är för att fylla i färgen på en SVG form.

.eyeball ( fill: red; )

Kom ihåg:

  • Detta kommer att åsidosätta en presentation attribut
  • Detta kommer inte att åsidosätta en inline stil, t.ex.

Värden

Den fillegenskapen kan acceptera någon CSS färgvärde.

  • Namngivna färger - orange
  • Hexfärger - #FF9E2C
  • RGB- och RGBa-färger - rgb(255, 158, 44)ochrgba(255, 158, 44, .5)
  • HSL och HSLa färger - hsl(32, 100%, 59%)ochhsla(32, 100%, 59%, .5)

Som en bonus fillaccepterar också mönster för SVG-former som definieras inuti ett defselement:

.module ( fill: url(#pattern); )

Se egenskapen Pen fyllning av CSS-Tricks (@ css-tricks) på CodePen.

Ett användningsfall

Ett vanligt användningsfall för fillär att ändra färgen på en SVG colornär du svävar, ungefär som vi gör när styling-länken svävar.

.icon ( fill: black; ) .icon:hover ( fill: orange; )

Se egenskapen Pen fyllning av CSS-Tricks (@ css-tricks) på CodePen.

Ett annat användningsfall

Den fillegenskapen är ett av många skäl SVG är ett mycket mer flexibelt alternativ än vanliga bildfiler. Låt oss ta ikoner, som ett exempel.

Vi kan ha samma uppsättning ikoner men i två olika färgscheman. Typiska bildfiler (som JPG.webp, PNG och GIF) kräver att vi gör två versioner av varje ikon - en för varje färgschema.

SVG tillåter oss däremot att måla ikonerna när vi använder CSS- fillegenskapen:

.icon ( fill: black; ) .icon-secondary ( fill: orange; )

Nu kan vi återanvända samma SVG-fil för flera scenarier genom att ändra klassnamnet på sökvägen eller formen:

Se egenskapen Pen fyllning av CSS-Tricks (@ css-tricks) på CodePen.

Mer information

  • SVG 1.1 Spec
  • MDN om fyllningar och stroke
  • Cascading SVG Fill Color
  • SVG Fill Patterns av Jacob Jenkov

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja