Transition not working in svg inline use when using variable?

Question

HTML

I am using code like this:

<svg class="svg svg_ex-1">
     <use href="sprite/sprite.svg#bit"></use>
</svg>

<symbol id="bit" viewBox="0 0 24 24">
    <path fill="var(--ex-1)" style="transition: 0.4s;" d="long..."/>
</symbol>

:root {
  --ex-1: #ffbd23;
}

&_ex-1 {
    width: 50px;
    height: 50px;

    &:hover {
      --ex-1: #ff6885;
    }
  }

If you do not use use, then everything works fine, but when using use, the color changes without transition. How to force animation through variables?
p.s. By simply deriving fill from use, it works smoothly with transition, but not with variables.

Answer 1

https://stackoverflow.com/questions/51395179/svg-f...
When you use use you are isolating the svg from the DOM.