如何通过CSS类调整SVG填充动画的水位高度？

Got it, let's sort this out so you can control the fill level with CSS classes easily. The issue with your current code is that the fillAction animation uses hardcoded translation values, so you can't adjust the fill height dynamically without rewriting keyframes. Here's a clean, maintainable solution:

Step 1: Refactor CSS to Use Custom Variables #

We'll replace fixed translate values with a CSS variable, then create classes to override this variable for different fill levels:

.st0 { fill: none; stroke: #000000; stroke-width: 4; stroke-miterlimit: 5; } 
.st1 { fill: none; stroke: #000000; stroke-width: 3; stroke-miterlimit: 5; } 
#logo2 { width: 150px !important; height: 150px !important; position: relative; margin-top: -100px; } 
#banner { border-radius: 50%; width: 150px; height: 150px; background: #fff; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); z-index: -1; margin-bottom: -50px; } 

/* Add a default fill level variable */
#banner .fill {
  --fill-offset: -5px; /* Default to full fill like your original code */
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

#banner #waveShape { 
  animation-name: waveAction; 
  animation-iteration-count: infinite; 
  animation-timing-function: linear; 
  animation-duration: 0.5s; 
  width: 300px; 
  height: 150px; 
  fill: #04ACFF; 
} 

/* Use the variable in keyframes */
@keyframes fillAction { 
  0% { transform: translate(0, 150px); } 
  100% { transform: translate(0, var(--fill-offset)); } 
} 

@keyframes waveAction { 
  0% { transform: translate(-150px, 0); } 
  100% { transform: translate(0, 0); } 
}

/* Classes for specific fill levels */
.fill-25 {
  --fill-offset: 112.5px !important; /* 150px * 0.75 = 25% fill */
}

.fill-75 {
  --fill-offset: 37.5px !important; /* 150px * 0.25 = 75% fill */
}

Step 2: Apply the Class to Your HTML #

Now just add the desired class to the .fill group in your SVG to set the fill level:

<div> 
<div id="banner"> 
<div> 
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
<defs> 
<clipPath id="drop"> 
<path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4 C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2 c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5 H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" /> 
</clipPath> 
</defs> 
<g clip-path="url(#drop)"> 
<g class="fill fill-25"> <!-- Swap with fill-75 for 75% fill -->
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" /> 
</g> 
</g> 
<g transform="scale(0.75), translate(32,0)"> 
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4 C130.7,77.6,68.3,6.7,68.2,6.7z" /> 
</g> 
</svg> 
</div> 
</div> 
</div>

How This Works #

• The --fill-offset variable controls how far the wave moves upward. Since your banner is 150px tall:
  • 112.5px = wave stops 112.5px from the bottom (25% fill)
  • 37.5px = wave stops 37.5px from the bottom (75% fill)
  • -5px = your original full fill (slightly over to cover the container edge)
• The !important flag ensures the class variables override the default value—you can remove it if you don't have conflicting styles.

This setup makes it trivial to add more fill levels later: just create a new class with the appropriate --fill-offset value based on the 150px container height.

内容的提问来源于stack exchange，提问作者mrks