SVG动画mask失效问题：下载按钮箭头移出红框仍可见

问题分析 #

核心问题是SVG遮罩（mask）未正确生效，箭头移出红框后依然可见，这是因为SVG遮罩的颜色规则被忽略：遮罩内的元素需要用white（白色）定义显示区域，black（黑色）定义隐藏区域，你用了红色，导致遮罩无法完全隐藏超出区域。此外，动画应用到单个path元素而非整个箭头组，也影响了遮罩效果。

解决方案 #

以下是修正后的完整代码，包含遮罩修复与动画优化：

修正后的CSS代码 #

@keyframes arrow-slide-recursively {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(344px);
  }
}

.fanbox-helper-fixed-menu-button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  padding: 4px;
  width: 54px;
  height: 54px;
}

.fanbox-helper-fixed-menu-button.busy {
  opacity: 0.3;
  pointer-events: none;
}

/* 动画应用到整个箭头组，而非单个path */
#fanbox-helper-quick-save-button.busy #fanbox-helper-quick-save-arrow {
  animation: arrow-slide-recursively 2s linear infinite;
}

修正后的HTML代码 #

<button id="fanbox-helper-quick-save-button" class="fanbox-helper-fixed-menu-button busy">
  <svg class="fanbox-helper-svg-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
    <!-- 修正遮罩：使用白色定义显示区域，移除多余属性 -->
    <mask id="fanbox-helper-quick-save-arrow-area">
      <rect x="120" y="0" width="272" height="440" fill="white"></rect>
    </mask>
    
    <!-- 调试用红框，可按需保留或删除 -->
    <rect x="120" y="0" width="272" height="440" fill="red" opacity="0.2"></rect>
    
    <!-- 箭头组应用遮罩 -->
    <g id="fanbox-helper-quick-save-arrow" mask="url(#fanbox-helper-quick-save-arrow-area)">
      <path class="arrow stick" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" d="m256,96 l0,256" stroke-width="40"></path>
      <path class="arrow edge left" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m256,392 l-104,-104"></path>
      <path class="arrow edge right" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m256,392 l104,-104"></path>
    </g>
    <path class="bowl" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m64,312 l0,148 l384,0 l0,-148"></path>
  </svg>
</button>

关键修改点说明 #

1. 修复遮罩颜色：将mask内rect的fill改为white，确保遮罩仅显示白色覆盖区域，超出部分完全隐藏。
2. 调整动画目标：把动画应用到整个箭头组#fanbox-helper-quick-save-arrow，让箭头整体同步移动，避免单个path动画导致的错位。
3. 校准动画位移：将动画的translateY值设为344px，这是红框高度（440px）减去箭头初始顶部位置（96px）的差值，确保箭头刚好滑到红框底部后循环。
4. 优化SVG结构：移除多余的xlink命名空间和xml:space属性，简化SVG代码。

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