How to do animated gradient on SVG image?

Question

I have implemented a basic animated gradient on text using pure CSS (and some extra DOM elements), as seen here:

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  font-size: 60px;
}

.base {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: red;
  background: linear-gradient(315deg, red 0%, green 74%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

.overlay:hover {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}


@keyframes shine {
  to {
    background-position: 200% center;
  }
}

<span class="container">
  <span class="base">a</span>
  <span class="overlay">a</span>
</span>

I tried replacing the parts with SVG and using the CSS background-clip property, but it doesn't seem to do anything on SVGs. How can I do this same text gradient effect on SVGs (on hover)?

The SVG I have is a complex hand-drawn owl exported as SVG (looks like a sketch), so it uses lots of complex paths.

Ideally this could be done on a CSS-loaded SVG, rather than using something like this.