SVG transform-origin in Firefox : So I have this blueprint that I've recreated as an SVG.

Everything works fine in Chrome, but in Firefox, once the rotation animation on the doors finishes, the doors themselves (the rotated elements) shift from their original positions either horizontally to the right or vertically to the bottom.

I know the issue **seemingly** has something to do with the `transform-origin` values, since initially the doors are lined up perfectly. However, I've tried adjusting the `transform-origin` coordinates, which makes me believe this issue is unrelated to the `transform-origin` values. For instance, for a door that shifts vertically to the bottom, try adjusting the `y` value by either increasing or decreasing it. It obviously has an effect, but the effect doesn't correspond to the shifting.

The issue is most noticeable after refreshing the browser once the animation has completed.

**Is this simply a bug in Firefox?**

Here is the [codepen][1]!


  [1]: https://codepen.io/tOkyO1/pen/GrzmGM