求助css动画使用变量问题
<svg width="800" height="600" style="background:#FFFFF0;border:solid 2px #FF7F50" opacity="1">
<path class="path1" d="M 23.17,45.038 200.916,104.7447 0.77796,200.48 144.93,6.9496 154.73,201.51 Z" fill="none" stroke="black" stroke-width="0.7" opacity="1"/>
</svg>
<style>
:root {
--animationtime1: 100;
--test:3%;
}
.path1 {
animation:anmpath1 calc(var(--animationtime1)*1s) ease-out 0s forwards;
}
@keyframes anmpath1 {
0% {stroke-dasharray:0,1100;}
var(--test) {stroke-dasharray:1100,1100;}
100% {stroke-dasharray:1100,1100;}
}
</style>
兰色部分能正常工作,但红色部分不工作,请各位老师帮忙