Событие click для svg

Необходимо разобраться, как обработать событие click на кнопке с элементом object.

<button class="clear-btn" id="switch-rules">
  <object data="img/Polygon 1.svg" type="image/svg+xml">
    <img src="img/Polygon 1.svg" alt="Вперёд" />
  </object>
</button>

Проблема заключается в том, что у SVG-файла есть свои стили при :hover. Поэтому нельзя просто добавить к элементу object pointer-events:none;, так как при наведении на SVG стили не будут изменяться.

<svg width="21.14" height="36.506" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg:hover { 
      cursor: pointer;
    }
    svg:hover path{
      fill: #B6C4D9;
      transition-duration: 0.5s;
    }
  </style> 
  <path d="m1.317 36.506 6.805-5.954 12.335-10.794c.223-.194.393-.426.512-.695.114-.257.171-.528.171-.81 0-.282-.057-.553-.17-.81-.12-.27-.29-.5-.513-.695L8.122 5.954 1.317 0 0 1.506 6.805 7.46 19.14 18.253 6.805 29.046 0 35l1.317 1.506Z" fill="#FFF" fill-rule="evenodd"/>
</svg>

Да, можно добавить код SVG непосредственно в DOM, но в этом случае SVG будет загружаться заново при каждом использовании, в то время как при использовании элемента object он кэшируется. Да и сам код захламляется.

Важно, чтобы событие click вызывает не просто переход по ссылке, а полноценную функцию, что усложняет задачу.