Появляется другой цвет на фоне SVG

#html #css #svg

Появляется другой цвет на градиенте SVG когда начинаем приближать или отдалять изображение
(при наведении курсора на блок). Почему и как и справить? Вот пример кода:



.container {
 width: 100px;
 height: 100px;
  background-color: #000;
}
.container:hover .ico {
   filter: url(#gradient-overlay-1);
         fill-rule: evenodd;
  }
.ico {
  fill: #fff;
  filter: none;
}


  

  



    

Ответы

Ответ 1

Тебе надо привязать изменение 

.ico {
  fill: #fff;
}


к тем действиям которые ты хочешь. Чтоб заливка менялась, так как тебе надо.


Ответ 2

svg {
    fill: currentColor;
}