Transition on "stroke-text-svg-filter"

Question

I'm familiar only with the basics of HTML and CSS and I'm making this website using a no-code tool called Webflow.

I inserted some custom code to get an outline effect using svg filters. Basically, the text is an outline, but when you hover over it, it becomes a white fill with no outline. This works well at the moment, but there is no transition and it looks very jerky as a result. I've been googling for hours with no result, I'm afraid it's difficult for me to understand how to solve this...

How can I add a transition?

Thanks!

This is the relevant code:

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" style="position:absolute; height:0;">
  <defs>
    <filter id="stroke-text-svg-filter">
      <feMorphology operator="dilate" radius="1"></feMorphology>
      <feComposite operator="xor" in="SourceGraphic"/>
    </filter>
  </defs>
</svg>
<style>
.menu-link {
  color: #FFFFFF;
  filter:url(#stroke-text-svg-filter);
}

.menu-link:hover{
filter:none;
}

I tried to add some "transition" CSS properties, but nothing worked.