fill

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 не «увидит» его.