W jaki sposób dodać hover dla SVG?

Witam serdecznie,
Mam taki kod:

<div class="col-md-6 col-lg-4 pb-4">
                <a href="#">
                    <div class="media align-items-center offer-list p-3">
                        <object type="image/svg+xml" data="images/szymon/icons/obrazek.svg" class="pr-3" ></object>
                        <div class="media-body pr-3">
                            Link
                        </div>
                    </div>
                </a>
            </div>



.offer-list {
    font-family: 'Now Regular';
    border-radius: 10px;
    border: 1px solid var(--colorOffer);
    font-size: 22px;
    height: 105px;
    transition: all ease 0.3s;
}

.offer-list:hover {
    color: var(--colorMerc);
    border: 2px solid var(--colorMerc);
}

.offer-list:hover object path{
    color: red;
    fill: red;
    stroke:red;
}

Podświetlenie działa mi dla tekstu oraz ramki. Chciałbym jeszcze zmienić kolor obiektu svg, jednak kod: .offer-list:hover object nie działa :(

W jaki sposób można to zrobić?

Musisz użyć inlinowego SVG wewnątrz dokumentu HTML.

<svg id="test" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>