Javascript 根据CSS类更改SVG填充动画高度

我使用以下SVG和CSS代码来设置SVG形状填充级别的动画

.st0{
填充：无；
行程：#000000；
笔画宽度：4；
行程限制：5；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：3；
行程限制：5；
}
#标识2{
宽度：150px！重要；
高度：150px！重要；
位置：相对位置；
利润上限：-100px；
}
#横幅{
边界半径：50%；
宽度：150px；
高度：150像素；
背景：#fff；
溢出：隐藏；
背面可见性：隐藏；
变换：translate3d（0,0,0）；
z指数：-1；
边缘底部：-50px；
}
#横幅，填充{
动画名称：fillAction；
动画迭代次数：1；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
动画持续时间：4s；
动画填充模式：正向；
}
#横幅#波形{
动画名称：waveAction；
动画迭代次数：无限；
动画计时功能：线性；
动画持续时间：0.5s；
宽度：300px；
高度：150像素；
填充：#04ACFF；
}
@关键帧填充动作{
0% {
转换：转换（0，150px）；
}
100% {
变换：平移（0，-5px）；
}
}
@动作关键帧{
0% {
转换：转换（-150px，0）；
}
100% {
变换：平移（0,0）；
}
}

---

通过修改播放的动画，您可以更改动画的最高级别。 通过添加额外的类来更改播放的动画，您可以决定播放哪个类

我修改了波浪动画以停止，因为它让我晕船

要点：

我通过添加一个需要与fill类一起使用的额外类来更改动画样式。这将使您能够选择将哪个类用于哪个动画

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

然后，我更改了相关关键帧动画的平移高度。您也可以在那里使用calc方法

calc（155px/100*25）

来计算自定义百分比

@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 115px);
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 85px);
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 45px);
  }
}

.st0{
填充：无；
行程：#000000；
笔画宽度：4；
行程限制：5；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：3；
行程限制：5；
}
#标识2{
宽度：150px！重要；
高度：150px！重要；
位置：相对位置；
利润上限：-100px；
}
#横幅{
边界半径：50%；
宽度：150px；
高度：150像素；
背景：#fff；
溢出：隐藏；
背面可见性：隐藏；
变换：translate3d（0,0,0）；
z指数：-1；
边缘底部：-50px；
}
.填充{
动画名称：fillAction；
动画迭代次数：1；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
动画持续时间：4s；
动画填充模式：正向；
}
填充，填充{
动画名称：fillAction25；
}
填充，填充{
动画名称：fillAction50；
}
填充，填充{
动画名称：fillAction75；
}
#横幅#波形{
动画名称：waveAction；
动画迭代次数：10次；
动画计时功能：线性；
动画持续时间：0.5s；
宽度：300px；
高度：150像素；
填充：#04ACFF；
}
@关键帧填充动作{
0% {
转换：转换（0，150px）；
}
100% {
变换：平移（0，-5px）；
}
}
人力资源{
边缘顶部：50px；
}
@关键帧填充操作25{
0% {
转换：转换（0，150px）；
}
100% {
转换：转换（0，115px）；
}
}
@关键帧fillAction50{
0% {
转换：转换（0，150px）；
}
100% {
转换：转换（085px）；
}
}
@关键帧填充操作75{
0% {
转换：转换（0，150px）；
}
100% {
转换：转换（0，45px）；
}
}
@动作关键帧{
0% {
转换：转换（-150px，0）；
}
100% {
变换：平移（0,0）；
}
}