Css SVG动画。绘制后填充路径

我已经创建了一个svg文件，页面加载时在其中“绘制”轮廓。 动画完成后，我想填充轮廓

这就是我所做的

有多条路径。这里有一个：

<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>

到目前为止，一切正常。
两秒钟后动画完成，现在我想填充它。
这是我认为我可以做的：

@keyframes fill {
    0% {
       fill: white;
       }
    100% {
       fill: black;
       }
      }

      #fill {
          animation-name: fill;
          animation-duration: 2s;
          animation-delay:2s;
      }

问题是我准备好了一个

id

和一个

类

分配给

路径

我试图用

\fill

更改

路径

的

id

如果我这样做，轮廓动画会被覆盖，它只需等待两秒钟。两秒钟后，路径被动画填充

我怎样才能做到这一点？ 我想要的是首先动画的轮廓，当他们完成的形状必须填补

---

Thnx.

在动画中可以有任意多个关键帧。只需在0%和50%之间设置路径动画，然后在50%和100%之间设置填充动画

给你：

.b1{
动画：笔划填充4s线性向前；
行程数组：324.774；
行程偏移：324.774；
}
@关键帧笔划填充{
0% {
填充物：白色；
}
50% {
填充物：白色；
笔划偏移：0；
}
100% {
填充：黑色；
笔划偏移：0；
}
}

---

在动画中可以有任意多个关键帧。只需在0%和50%之间设置路径动画，然后在50%和100%之间设置填充动画

给你：

.b1{
动画：笔划填充4s线性向前；
行程数组：324.774；
行程偏移：324.774；
}
@关键帧笔划填充{
0% {
填充物：白色；
}
50% {
填充物：白色；
笔划偏移：0；
}
100% {
填充：黑色；
笔划偏移：0；
}
}

Dude。。。你是最棒的。谢谢你，也谢谢你解释伙计。。。你是最棒的。谢谢你，也谢谢你的解释

@keyframes fill {
    0% {
       fill: white;
       }
    100% {
       fill: black;
       }
      }

      #fill {
          animation-name: fill;
          animation-duration: 2s;
          animation-delay:2s;
      }