我一直在尝试使用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;
}
}