css - SVG 勾勒出淡入动画

Question

我在使用 SVG 徽标动画时遇到了一些问题。我使用 vivus 工具（https://maxwellito.github.io/vivus-instant/）制作了轮廓动画。这很好用。

现在我希望路径填充大约 80%。

这样最后整个标志都是可见的，而不仅仅是轮廓。我尝试添加我在这里找到的一段代码：https ://codepen.io/kay8/pen/GgEQra

但这只会使整个徽标填充 80%，但轮廓动画不再起作用。

这是我的代码：

<svg version="1.1" id="wino" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 662.1 176.1" style="background-color: #e97965;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}

.HqJTsNPU_0 {
    stroke-dasharray: 1397 1399;
    stroke-dashoffset: 1398;
    animation: HqJTsNPU_draw 2000ms ease-out 0ms forwards;
}
.HqJTsNPU_1 {
    stroke-dasharray: 821 823;
    stroke-dashoffset: 822;
    animation: HqJTsNPU_draw 2000ms ease-out 111ms forwards;
}
.HqJTsNPU_2 {
    stroke-dasharray: 227 229;
    stroke-dashoffset: 228;
    animation: HqJTsNPU_draw 2000ms ease-out 222ms forwards;
}
.HqJTsNPU_3 {
    stroke-dasharray: 92 94;
    stroke-dashoffset: 93;
    animation: HqJTsNPU_draw 2000ms ease-out 333ms forwards;
}
.HqJTsNPU_4 {
    stroke-dasharray: 457 459;
    stroke-dashoffset: 458;
    animation: HqJTsNPU_draw 2000ms ease-out 444ms forwards;
}
.HqJTsNPU_5 {
    stroke-dasharray: 426 428;
    stroke-dashoffset: 427;
    animation: HqJTsNPU_draw 2000ms ease-out 555ms forwards;
}
.HqJTsNPU_6 {
    stroke-dasharray: 96 98;
    stroke-dashoffset: 97;
    animation: HqJTsNPU_draw 2000ms ease-out 666ms forwards;
}
.HqJTsNPU_7 {
    stroke-dasharray: 462 464;
    stroke-dashoffset: 463;
    animation: HqJTsNPU_draw 2000ms ease-out 777ms forwards;
}
.HqJTsNPU_8 {
    stroke-dasharray: 227 229;
    stroke-dashoffset: 228;
    animation: HqJTsNPU_draw 2000ms ease-out 888ms forwards;
}
.HqJTsNPU_9 {
    stroke-dasharray: 92 94;
    stroke-dashoffset: 93;
    animation: HqJTsNPU_draw 2000ms ease-out 1000ms forwards;
}
@keyframes HqJTsNPU_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

/*fill in animation*/

.st0{
    fill: #000000;
    fill-opacity: 1;
    animation: fill-element 3s ease-in-out 0s forwards;
}
    
.st1{
    fill: #ffffff;
    fill-opacity: 1;
    animation: fill-element 3s ease-in-out 0s forwards;
}
    
@keyframes fill-element{
    0%   {fill-opacity: 0;}
    80%  {fill-opacity: 0;}
    100% {fill-opacity: 1;}
    }
</style>
<path id="black-outline_2_" class="st0 HqJTsNPU_0" d="M17.4,126.9L17.4,91.6L645.2,91.6L645.2,162.1L17.4,162.1L17.4,126.9"></path>
<path class="st1 HqJTsNPU_1" d="M97.8,137.7L68,137.7L42.4,23.1L71.4,23.1L85.3,93.8L105.3,23.1L131.6,23.1L151.6,93.8L165.5,23.1L
    193.5,23.1L168,137.7L138.2,137.7L118,64.7Z"></path>
<path class="st1 HqJTsNPU_2" width="26.5" height="86.6" d="M205.5 51.1 L232 51.1 L232 137.7 L205.5 137.7 Z"></path>
<path class="st1 HqJTsNPU_3" d="M218.7,43.1c3.9,0.1,7.6-1.5,10.3-4.3c2.8-2.7,4.3-6.4,4.2-10.3c0.1-3.9-1.5-7.6-4.2-10.3
    c-5.7-5.7-14.9-5.7-20.6,0c-2.8,2.7-4.3,6.4-4.2,10.3c-0.1,3.9,1.5,7.6,4.2,10.3C211.1,41.6,214.8,43.1,218.7,43.1"></path>
<path class="st1 HqJTsNPU_4" d="M274.9,137.7V79c1.8-2.2,4-3.9,6.5-5c2.8-1.2,5.9-1.8,9-1.8c0.6,0,1.1,0,1.7,0c8.2,0.5,14.5,7.5,14,15.7v49.8
    h26.5V84.3c0-10.1-3.2-18.5-9.6-25s-14.7-9.8-24.9-9.8c-4.3,0-8.5,0.6-12.5,2c-3.9,1.2-7.5,3.1-10.7,5.6v-5.9h-26.5v86.6h26.5V137.7
    z"></path>
<path class="st1 HqJTsNPU_5" d="M391.4,116.4c-5.7,0.1-11.1-2.2-15-6.4c-4.1-4.1-6.3-9.8-6.1-15.5c-0.1-5.8,2.1-11.5,6.1-15.7
    c0.2-0.2,0.4-0.4,0.6-0.6c8.3-8,21.4-7.7,29.4,0.6c4.1,4.2,6.3,9.9,6.1,15.7c0.1,5.8-2.1,11.4-6.1,15.5
    C402.5,114.2,397.1,116.5,391.4,116.4 M344.4,94.4c0,6.1,1.2,12.1,3.7,17.6c2.4,5.4,5.8,10.2,10,14.3c4.3,4.1,9.4,7.3,14.9,9.5
    c11.9,4.6,25,4.6,36.8,0c5.5-2.2,10.6-5.4,14.9-9.5c4.2-4.1,7.6-8.9,10-14.3c4.9-11.2,4.9-24,0-35.2c-2.4-5.4-5.8-10.2-10-14.3
    c-4.3-4.1-9.4-7.4-14.9-9.6c-11.8-4.7-25-4.7-36.8,0c-5.5,2.2-10.6,5.4-14.9,9.5c-4.2,4.1-7.6,8.9-10,14.3
    C345.7,82.4,344.4,88.4,344.4,94.4"></path>
<path class="st1 HqJTsNPU_6" d="M460.7,109c-4,0-7.9,1.6-10.7,4.5c-2.9,2.9-4.6,6.8-4.5,10.9c0.1,8.4,6.9,15.1,15.3,15
    c8.4,0,15.2-6.8,15.2-15.2S469.1,109,460.7,109"></path>
<path class="st1 HqJTsNPU_7" d="M483.3,128c5.4,3.9,11.6,6.8,18.1,8.4c7.5,2,15.1,2.9,22.8,2.9c5.3,0,10.5-0.7,15.6-2.2
    c4.5-1.3,8.6-3.4,12.4-6.1c3.3-2.5,6.1-5.7,8.1-9.3c2-3.6,3-7.6,3-11.6c0.2-6.3-2.4-12.4-7-16.8c-4.6-4.4-11.2-7.2-19.7-8.4
    l-17.2-2.6c-3.7-0.6-6.3-1.3-7.9-2.4c-1.5-0.9-2.3-2.5-2.3-4.2c0.1-2,1.3-3.8,3.2-4.5c2.5-1.3,5.4-1.8,8.2-1.7
    c4.3,0,8.6,0.6,12.7,1.8c4.7,1.5,9.2,3.5,13.4,6l12.6-17c-5.4-3.4-11.3-6-17.4-7.8c-6.1-1.8-12.4-2.7-18.8-2.7
    c-11.6,0-20.7,2.5-27.3,7.6c-6.7,5-10,11.9-10,20.6c0,7.1,2.3,12.9,6.9,17.3c4.6,4.4,11.1,7.3,19.6,8.6l17.2,2.6
    c2.4,0.2,4.7,1,6.7,2.2c1.3,0.9,2.1,2.4,2.1,4c0,2.1-1.3,3.8-3.8,5c-3.3,1.4-6.8,2-10.4,1.9c-4.5,0-9-0.8-13.3-2.2
    c-5.2-1.8-10.2-4.2-14.9-7.1L483.3,128"></path>
<path class="st1 HqJTsNPU_8" width="26.5" height="86.6" d="M573.3 51.1 L599.8 51.1 L599.8 137.7 L573.3 137.7 Z"></path>
<path class="st1 HqJTsNPU_9" d="M586.5,43.1c3.9,0.1,7.6-1.5,10.4-4.3c2.8-2.7,4.3-6.4,4.3-10.3c0.1-3.9-1.5-7.6-4.3-10.3
    c-5.7-5.7-14.9-5.7-20.6,0c-2.8,2.7-4.3,6.4-4.2,10.3c-0.1,3.9,1.5,7.6,4.2,10.3C578.9,41.6,582.7,43.1,586.5,43.1"></path>
</svg>

标签： cssanimationsvg