SVG 矩形宽度动画在 Firefox 中不起作用

Question

我一直在尝试使用 css 为 svg 矩形的宽度设置动画，它似乎可以与 chrome 和 opera 一起使用，但不能在 Firefox 中使用，我将不胜感激，在此先感谢

https://codepen.io/goprime/pen/BOPBjM

这是代码：

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

您是否考虑过翻译#anim_test_top？接下来是我翻译#anim_test_top 的代码。此外，我对您的 SVG 进行了一些更改，因为您也有可能进行转换。

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>

希望对你有帮助

更新：

如果翻译没有问题，您可以缩放矩形：

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>