使用CSS mix-blend-mode实现Netflix风格动画“继续观看”按钮的问题

你遇到的图标在进度填充区的故障现象，本质是浏览器在处理复杂SVG路径+transform动画+mix-blend-mode混合时的渲染精度问题，属于常见的浏览器渲染边缘case，不是代码逻辑问题。以下是几个可行的解决思路：

1. 替换mix-blend-mode为遮罩（mask）实现 #

放弃依赖混合模式显示进度填充，改用SVG遮罩控制显示区域：

• 在SVG内部定义矩形遮罩元素，给遮罩添加横向移动动画；
• 将按钮的填充层和图标层都应用这个遮罩，进度填充的显示完全由遮罩位置控制，彻底避免混合模式的渲染冲突。

示例代码片段：

<defs>
  <mask id="progress-mask">
    <rect width="100%" height="100%" fill="white" />
    <rect id="progress-rect" width="100%" height="100%" fill="black">
      <animate attributeName="x" from="-100%" to="0%" dur="3s" repeatCount="indefinite" />
    </rect>
  </mask>
</defs>
<g mask="url(#progress-mask)">
  <!-- 按钮填充层和图标层放在这里 -->
</g>

2. 简化SVG路径复杂度 #

复杂的贝塞尔曲线SVG路径配合transform动画时，容易出现像素对齐偏差：

• 把按钮的复杂路径替换为基础形状组合（比如圆角矩形+简单三角形图标）；
• 优化路径锚点，删除不必要的控制点，降低浏览器渲染计算的复杂度。

3. 调整动画变换原点与渲染属性 #

显式设置变换原点，避免坐标系不匹配导致的错位：

.icon {
  transform-origin: center center;
  backface-visibility: hidden; /* 强制提升渲染精度 */
  outline: 1px solid transparent; /* 修复边缘像素错位的小技巧 */
}

4. 改用纯CSS clip-path实现进度填充 #

完全脱离SVG路径限制，用CSS裁剪实现进度动画：

• 给按钮设置背景色作为填充层，通过clip-path: inset(0 calc(100% - var(--progress)) 0 0)裁剪显示区域；
• 用CSS动画动态修改--progress变量值，这种纯CSS方案的渲染稳定性远高于SVG+混合模式的组合。

示例代码片段：

.watch-btn {
  --progress: 0%;
  background: #e50914;
  clip-path: inset(0 calc(100% - var(--progress)) 0 0);
  animation: fill-progress 3s linear infinite;
}
@keyframes fill-progress {
  to { --progress: 100%; }
}

内容的提问来源于stack exchange，提问作者Michał Lach