如何用自定义波浪动画填充SVG Logo？已有CSS圆形填充实现

核心思路是利用SVG的**裁剪路径（clipPath）**功能，将波浪动画限制在SVG Logo的轮廓范围内，从而实现Logo被波浪填充的效果。以下是具体实现步骤和代码调整：

1. 调整SVG结构，添加裁剪路径 #

将你的SVG Logo路径定义为裁剪区域，把波浪动画元素放在裁剪后的容器内，确保波浪只在Logo形状内显示：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义裁剪路径：替换为你的SVG Logo实际路径 -->
  <defs>
    <clipPath id="logoClip">
      <path d="M100,20 C120,40 180,40 180,100 C180,160 120,160 100,180 C80,160 20,160 20,100 C20,40 80,40 100,20 Z" />
    </clipPath>
  </defs>

  <!-- 波浪动画容器：应用裁剪路径 -->
  <g clip-path="url(#logoClip)">
    <!-- 静态填充区域 -->
    <rect class="water" x="0" y="200" width="200" height="200" fill="#FFCA00" />
    <!-- 波浪路径 -->
    <path class="water_wave water_wave_front" 
          d="M0,200 C50,180 150,220 200,200 L200,250 L0,250 Z" 
          fill="#FFCA00" />
  </g>

  <!-- 可选：保留Logo轮廓（根据需求选择） -->
  <path d="M100,20 C120,40 180,40 180,100 C180,160 120,160 100,180 C80,160 20,160 20,100 C20,40 80,40 100,20 Z" 
        fill="none" stroke="#000" stroke-width="2" />
</svg>

2. 修改CSS适配SVG环境 #

基于你现有的CSS代码，调整动画和布局属性，适配SVG的坐标系统：

.water {
  transition: all .3s;
  /* 初始状态：填充区域完全在Logo下方 */
  transform: translateY(0);
}

.water_wave {
  width: 200%;
  position: relative;
  bottom: 100%;
}

.water_wave_front {
  animation: wave-front .7s infinite linear;
}

/* 波浪横向滚动动画 */
@keyframes wave-front {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 示例：hover时触发填充动画 */
svg:hover .water {
  transform: translateY(-100px);
}

关键原理说明 #

• 裁剪路径（clipPath）：将Logo的路径定义为可见区域，内部的波浪和填充元素只会在这个区域内渲染，完美贴合Logo形状。
• 波浪动画调整：将原CSS中的position:absolute改为SVG内的相对定位，动画的translateX设置为-50%，匹配200%宽度的波浪路径，实现无缝循环滚动。
• 填充过渡：保留你原有的transition属性，通过调整transform: translateY控制填充高度，模拟水位上升效果。

替代方案：使用SVG蒙版（mask） #

如果需要更复杂的透明度效果，也可以用蒙版替代裁剪路径：

<defs>
  <mask id="logoMask">
    <!-- 白色区域为可见，黑色为透明 -->
    <path d="M100,20 C120,40 180,40 180,100 C180,160 120,160 100,180 C80,160 20,160 20,100 C20,40 80,40 100,20 Z" fill="#fff" />
  </mask>
</defs>

<!-- 应用蒙版 -->
<g mask="url(#logoMask)">
  <!-- 波浪和填充元素 -->
</g>

内容的提问来源于stack exchange，提问作者Luiz Gustavo Nunes