如何用SVG和CSS实现流动管道动画？蒙版X轴位移动画求助

问题描述 #

需要用SVG和CSS实现“流动管道”动画，已搭建基础SVG结构，但无法实现蒙版X轴位置的动画效果，尝试多种CSS属性无效，寻求解决方案。当前代码如下：

.svg-container {
    position: relative;
    width: 600px;
    height: 300px;
}

.svg-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* How to translate the mask? */
#gradient-mask {
  mask-position: 50% 50%
}

<div class="svg-container">
  <!--  background gray line  -->
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
    <path d="M 0,50 Q 50,0 100,50 T 200,50" stroke="lightgray" stroke-width="2" fill="none" />
  </svg>
  <!--  foreground blue line  -->
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
    <defs>
      <linearGradient id="gradient">
        <!-- white shows, black hides-->
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="0.8" stop-color="white" stop-opacity="1" />
        <stop offset="0.8" stop-color="white" stop-opacity="0" />
      </linearGradient>

      <mask id="gradient-mask">
        <rect x="0" y="0" width="100%" height="100" fill="url(#gradient)" />
      </mask>
    </defs>

    <path d="M 0,50 Q 50,0 100,50 T 200,50" stroke="blue" stroke-width="2" fill="none" mask="url(#gradient-mask)" />
  </svg>
</div>

解决思路 #

直接对#gradient-mask元素应用mask-position等CSS属性无效，因为SVG的mask元素本身不支持这些CSS定位属性。正确的做法是动画化mask内部的渐变位置，或者对mask里的矩形应用变换动画，这里推荐前者，更简洁高效：

• 调整渐变的坐标属性：给linearGradient添加x1、x2属性，控制渐变的起始和结束位置，初始值设为让渐变完全在路径左侧外部（比如x1="-0.8"，x2="0"）。
• 添加CSS动画：通过动画改变x1和x2的值，让渐变从左到右移动，覆盖整个路径。动画终点设为x1="1.8"，x2="2.6"，确保渐变完全移出右侧，形成循环流动效果。
• 优化渐变过渡：调整渐变的stop节点，让高亮部分的过渡更自然，避免生硬的边缘。

修改后的完整代码 #

.svg-container {
    position: relative;
    width: 600px;
    height: 300px;
}

.svg-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 动画化渐变的x轴位置 */
#gradient {
  animation: flow 2s linear infinite;
}

@keyframes flow {
  0% {
    x1: -0.8;
    x2: 0;
  }
  100% {
    x1: 1.8;
    x2: 2.6;
  }
}

<div class="svg-container">
  <!-- 背景灰色管道 -->
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
    <path d="M 0,50 Q 50,0 100,50 T 200,50" stroke="lightgray" stroke-width="2" fill="none" />
  </svg>
  <!-- 前景蓝色管道（带流动蒙版） -->
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
    <defs>
      <linearGradient id="gradient" x1="-0.8" x2="0" y1="0" y2="0">
        <!-- 调整stop参数让过渡更平滑 -->
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="0.2" stop-color="white" stop-opacity="1" />
        <stop offset="0.6" stop-color="white" stop-opacity="1" />
        <stop offset="0.8" stop-color="white" stop-opacity="0" />
      </linearGradient>

      <mask id="gradient-mask">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
      </mask>
    </defs>

    <path d="M 0,50 Q 50,0 100,50 T 200,50" stroke="#007bff" stroke-width="2" fill="none" mask="url(#gradient-mask)" />
  </svg>
</div>

补充说明 #

• 动画时长2s可根据需求调整，linear动画函数保证流动速度均匀，infinite实现循环播放。
• 渐变的x1/x2取值基于SVG的 viewBox坐标系统，使用小数相对值适配不同尺寸的容器。
• 调整stop节点的offset和opacity可以改变高亮段的长度和过渡柔和度，匹配目标效果。

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