SVG动画在Firefox中表现有趣

Question

这是SVG动画的代码。

This is the jsfiddle

@keyframes rotate {
  100%{
    transform: rotate(360deg);
  }
}
#rotate {
   transform-origin: 50% 50%;
   transform-box: fill-box;
   animation: rotate 3s linear infinite;
}
#rotate > rect {
    transform: translate(12px, 12px);
}

<svg id="H1XgaUeE3lX" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 387">
<g id="rotate">
<rect x="50" width="100" height="20" y="50"/>
</g>
</svg>

动画的变化取决于我在哪个浏览器中打开代码。 它在chrome中工作正常，但在Firefox中不起作用。

旋转轴的变化取决于打开它的那只裤子。