Как изменить цвет svg иконки, fill указан в теге?

Question

[NataVinokur]

Подскажите, пожалуйста, как изменить цвет такой иконки svg при наведении через css.
На страницу вставлена в виде:

<object  type="image/svg+xml" data="img/icon.svg">
      <img  src="img/icon.svg">
</object>

пробовала так в CSS - не работает:
svg #mygca:hover{
fill: red;
}

Сама иконка:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="49" viewBox="0 0 49 49"><defs><path id="mygca" d="M534.668 1123.717l-14.266 14.268-32.868 14.478 14.477-32.872 14.268-14.264a1.589 1.589 0 1 1 2.248 2.248l-13.844 13.847-8.576 19.466 2.999 2.999 19.467-8.573 13.847-13.844a1.587 1.587 0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 1.585 0 0 1 2.25 0c.623.62.623 1.625 0 2.249l-13.332 13.332a1.594 1.594 0 0 1-2.25 0 1.593 1.593 0 0 1 0-2.25zm-3.48-3.482l13.333-13.332a1.59 1.59 0 1 1 2.25 2.25l-13.333 13.332a1.592 1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.619.622 1.624 0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.155-1.125-.466a1.591 1.591 0 0 1 0-2.249z"/></defs><g><g transform="translate(-487 -1104)"><use xlink:href="#mygca"/><use fill="#555" xlink:href="#mygca"/></g></g></svg>

Заранее спасибо

Answer 1

[Ankhena]

с помощью filter https://blog.union.io/code/2017/08/10/img-svg-fill/
И поищите онлайн-генератор нужного фильтра. Сама картинка должна быть черной.

Comments

[NataVinokur]

https://codepen.io/sosuke/pen/Pjoqqp - использовала этот ресурс для генератора фильтра.
Спасибо

[Kostiantyn Kondratiuk]

Спасибо, получилось! И генератор хороший тоже.

Добавлю ещё, что часто надо менять цвет не только СВГ но и всей ссылки, в которой она находится. Поэтому в CSS прописываем так (пример):
a:hover .icon {
filter: invert(60%) sepia(99%) saturate(406%) hue-rotate(87deg) brightness(96%) contrast(82%);
transition: all 0.7s ease;
}
где .icon - класс самой СВГ.
Данные для filter выдаст генератор, ссылка на который в пред. коменте.
transition - плавность смены цвета.
Ну и для самой ссылки должен быть прописан hover отдельно.