SVG颜色动画异常：矩形无法显示渐变/指定颜色求助

问题根源：
SVG的<mask>元素是基于亮度值生成遮罩透明度的，不管你给mask里的元素设置什么颜色，最终都会被转换成灰度：白色代表完全不透明（显示下方元素），黑色代表完全透明（隐藏），中间灰度对应半透明。所以你在mask里给矩形加渐变或设为red，只会被解析成灰阶，自然看不到预期色彩。

修复方案：
把渐变应用到被遮罩的元素上，而非mask内部。如果需要实现彩色动画条的效果，可以单独创建一个带渐变的矩形，给它应用同一个mask，和原白色路径叠加即可。

修改后的完整代码：

<svg width="650" height="490" viewBox="0 -27 415 190" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ss" gradientTransform="rotate(63)">
      <stop offset="0%" style="stop-color:rgb(230,67,22);" />
      <stop offset="100%" style="stop-color:rgb(101,32,70);" />
    </linearGradient>

    <mask id="mask1">
      <!-- mask内只保留黑白元素，控制显示区域 -->
      <rect x="-445" y="0" width="445" height="190" fill="white">
        <animate attributeName="x" values="-445; 0; 0; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
      </rect>
      <!-- 用白色定义mask的显示区域，mask只识别亮度 -->
      <rect x="-445" y="0" width="85" height="190" fill="white">
        <animate attributeName="x" values="-445; -445; 445; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
      </rect>
    </mask>
  </defs>

  <!-- 原白色路径 -->
  <path d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" fill="white" mask="url(#mask1)"/>
  <!-- 新增渐变矩形，应用相同mask实现彩色动画条 -->
  <rect width="415" height="190" fill="url(#ss)" mask="url(#mask1)"/>
</svg>

修改说明：

1. 将mask内第二个矩形的填充色改为白色，确保mask能正确识别该区域的显示规则
2. 添加一个覆盖整个SVG可视区域的渐变矩形，给它应用同一个mask，这样mask的动画就会控制渐变区域的显示，实现你想要的彩色滑动条效果

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