I’m trying to animate an element in SVG that is inserted via the <use> element. This works on Firefox and Chrome, but not on Safari.

Here is a proof of concept:

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMidYMid slice"
  style="width: 100%"
>
  <defs>
    <circle id="t" class="test" cx="50" cy="50" r="25" fill="hotpink"/>
  </defs>

  <!-- This circle is *not* animated -->
  <use href="#t"></use>

  <!-- This circle is animated -->
  <circle class="test" cx="110" cy="50" r="25" fill="hotpink"/>

  <style>
    .test {
      animation: 3s test infinite;
      /*
        proof that the styles are applied: both
        circles are limegreen rather than hot pink
      */
      fill: limegreen;
    }

    @keyframes test {
      from {
        translate: 0 0;
      }
      to {
        translate: 0 -10px;
      }
    }
  </style>
</svg>

In Firefox and Chrome, both circles will properly bounce up and down. On Safari, only the left circle is animated.

I already tried to move the @keyframes inside the <defs> block and even inside a wrapping <g>, but nothing helped so far. To me it looks like this is a bug in Safari, but how can I circumvent it?