Запълване - CSS-трикове

Anonim

В fillимота в CSS е за попълване на цвета на форма SVG.

.eyeball ( fill: red; )

Помня:

  • Това ще замени атрибута на презентацията
  • Това няма да замени вградения стил, напр

Стойности

В fillимота може да приеме всяко CSS цвят стойност.

  • Наименовани цветове - orange
  • Шестостенни цветове - #FF9E2C
  • RGB и RGBa цветове - rgb(255, 158, 44)иrgba(255, 158, 44, .5)
  • Цветове HSL и HSLa - hsl(32, 100%, 59%)иhsla(32, 100%, 59%, .5)

Като бонус fillсъщо така приема шаблоните на SVG фигури, които са дефинирани вътре в defsелемент:

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

Вижте свойството Pen fill от CSS-Tricks (@ css-tricks) на CodePen.

Случай за употреба

Често използван случай за fillпромяна на цвета на SVG при нанасяне на курсора, подобно на това, което правим colorпри оформяне на курсора на връзката.

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

Вижте свойството Pen fill от CSS-Tricks (@ css-tricks) на CodePen.

Друг случай на употреба

В fillимота е една от многото причини SVG е много по-гъвкав вариант, отколкото типичните файлове с изображения. Да вземем за пример икони.

Може да имаме еднакъв набор от икони, но в две различни цветови схеми. Типичните графични файлове (като JPG.webp, PNG и GIF) ще изискват от нас да направим две версии на всяка икона - по една за всяка цветова схема.

SVG, от друга страна, ни позволява да рисуваме иконите при използване на CSS fillсвойството:

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

Сега можем да преназначим един и същ SVG файл за множество сценарии, като променим името на класа на пътя или фигурата:

Вижте свойството Pen fill от CSS-Tricks (@ css-tricks) на CodePen.

Повече информация

  • SVG 1.1 Спецификация
  • MDN за пълнене и удари
  • Каскаден SVG цвят на запълване
  • Шаблони за запълване на SVG от Яков Дженков

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Да Да Да Да 9+ 4.4+ Да