fill (SVG)

CSS-свойство fill задаёт цвет заливки SVG-фигур.

Зачем нужно

Позволяет стилизовать SVG-иконки через CSS вместо атрибутов — менять цвет при hover, в темной теме, по состоянию.

Где используется

  • Иконки с изменением цвета при hover
  • Тёмная / светлая тема
  • SVG-диаграммы и графики

Code example

/* Базовая заливка */
svg { fill: #3b82f6; }

/* Hover-эффект */
.icon {
  fill: #64748b;
  transition: fill 0.2s;
}
.icon:hover { fill: #3b82f6; }

/* currentColor — наследует цвет текста */
.nav-link svg {
  fill: currentColor;
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
  .logo { fill: #f8fafc; }
}

/* Убрать заливку */
.outlined { fill: none; }

/* fill-opacity */
.semi-transparent {
  fill: #3b82f6;
  fill-opacity: 0.5;
}

/* fill-rule для сложных путей */
.complex-shape { fill-rule: evenodd; }

Связанные темы

Ресурсы