Is it possible to change the font color of a n active tab to an animation svg?

I'm not sure about how the svg would work here (though it might work fine), but you can do that with just CSS as well:

@keyframes tab-gradient-anim{
  from{ background-position-x: 0% }
  to{ background-position-x: 200% }
}
.tab-content[selected]{
  background-image: linear-gradient(
        90deg,
        rgb(255, 0, 0) 0%,
        rgb(255, 154, 0) 12%,
        rgb(208, 222, 33) 24%,
        rgb(79, 220, 74) 35%,
        rgb(63, 218, 216) 44%,
        rgb(47, 201, 226) 50%,
        rgb(28, 127, 238) 60%,
        rgb(95, 21, 242) 70%,
        rgb(186, 12, 248) 80%,
        rgb(251, 7, 217) 90%,
        rgb(255, 0, 0) 100%
    );
  background-repeat: repeat-x;
  background-size: 200% 100%;
  animation: tab-gradient-anim 2s infinite steps(20);
  background-clip: text;
  color: transparent;
}
.tab-content[selected]:-moz-window-inactive{
  animation-play-state: paused;
}

You could use linear instead of steps(20) for interpolation method, but linear causes rather massive GPU use because it is updated at your framerate - steps(20) instead updates only 20 times during the 2 seconds interval - which, although not as smooth, is barely noticeable change perceptually but uses way less GPU.

Here I've also added rule to stop the animation when window becomes inactive - otherwise the animation runs for all of them. Feel free to remove that last part, but if you had - say 5 windows, the animation would then use about 5x GPU.