fill

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

CSS-свойство fill, как и у одноимённого SVG-атрибута, используется для оформления цвета заливки SVG-элемента. По умолчанию — black.

Пример

Секция статьи "Пример"
        
          
          .eye {  fill: blue;}
          .eye {
  fill: blue;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Свойство соответствует SVG-атрибуту fill и содержит обозначение цвета.

Помимо стандартных форматов: именованного цвета (orange, rebeccapurple и др.), RGB(A), HEX и HSL(A), fill поддерживает формат ссылки на SVG-элемент, который будет как паттерн заполнять площадь элемента:

        
          
          .pacman {  fill: url(#pattern);}
          .pacman {
  fill: url(#pattern);
}

        
        
          
        
      

Подсказки

Секция статьи "Подсказки"

💡 Через CSS-свойство можно управлять цветом заливки SVG-элементов с помощью других возможностей CSS, например, при наведении курсора:

        
          
          .pacman {  fill: url(#pattern);}.pacman:hover {  fill: yellow;}
          .pacman {
  fill: url(#pattern);
}

.pacman:hover {
  fill: yellow;
}

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Realetive советует

Секция статьи "Realetive советует"

🛠 CSS-свойство fill влияет на цвет заливки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение, вставленное через SVG-шрифт, <img> / <object> или background / background-image не «увидит» его.