SVG Rectangle width animation not working in Firefox - css

Question

I've been trying to animate the width of an svg rectangle using css, and it seems to be working with chrome and opera, but isn't working in firefox, I'd appreciate any help in this, thanks in advance
https://codepen.io/goprime/pen/BOPBjM
And here's the code:
HTML:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Gravit.io --><svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="908.444 448 948 1114"
width="948" height="1114">
<!-- This is the main background -->
<g>
<rect x="908.444" y="448" width="948" height="1114" transform="matrix(1,0,0,1,0,0)" fill="white" />
<g transform="matrix(1,0,0,1,1232.227,773.652)">
<text transform="matrix(1,0,0,1,0,76.957)" style="font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;">INTERIOR</text></g>
</g>
<!-- First box cover-->
<rect class="anim_test_top" x="1130" y="773.652" transform="matrix(1,0,0,1,0,0) rotate(180 1430 820.652)"
fill="white" />
</svg>
CSS:
.anim_test_top {
/* stroke:cyan; */
width: 530px;
height: 80px;
animation: anim 2s linear forwards;
}
#keyframes anim {
from {
width: 630.214px;
}
to {
width: 0;
}
}

Answer 1

Have you considered to translate the #anim_test_top? Next come my code where I'm translating the #anim_test_top. Also I've made some changes to your SVG since you have too may transforms.
svg{max-height:100vh;}
#anim_test_top {
stroke:cyan;
width: 450px;
height: 100px;
transform:translate(0, 0);
animation: anim 2s linear forwards;
}
text{font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;}
#keyframes anim {
0% {
transform:translate(0, 0);
}
100% {
transform:translate(450px, 0);
}
}
<svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 948 500">
<!-- This is the main background -->
<g>
<rect x="0" y="0" width="948" height="1114" fill="#eee" />
<g>
<text y="200" x="424" id="text" text-anchor="middle">INTERIOR</text></g>
</g>
<!-- First box cover-->
<rect id="anim_test_top" width="450" height="100" x="200" y="130" fill="rgba(255,255,255,.75)" >
</rect>
</svg>
I hope this helps
UPDATE:
if translating is out of question you can scale the rectangle:
svg{max-height:100vh;}
#anim_test_top {
stroke:cyan;
width: 450px;
height: 100px;
transform-origin: top right;
transform:scale(1, 1);
animation: anim 2s linear forwards;
}
text{font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;}
#keyframes anim {
0% {
transform:scale(1, 1);
}
100% {
transform:scale(0, 1);
}
}
<svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 948 500">
<!-- This is the main background -->
<g>
<rect x="0" y="0" width="948" height="1114" fill="#eee" />
<g>
<text y="200" x="424" id="text" text-anchor="middle">INTERIOR</text></g>
</g>
<!-- First box cover-->
<rect id="anim_test_top" width="450" height="100" x="200" y="130" fill="rgba(255,255,255,.75)" >
</rect>
</svg>