SVG遮罩背景实现滚动时XG图形适配视口问题求助

问题分析 #

原代码存在几个核心问题：

• 遮罩应用对象错误：给SVG元素自身加了mask属性，实际应该给背景图应用遮罩
• 容器无滚动空间：.container仅设置100vh高度，无法触发滚动
• 遮罩逻辑倒置：mask内是全白矩形，没有用XG路径作为遮罩形状
• 滚动缩放逻辑不合理：直接累加滚动距离会导致元素无限放大，超出预期

修改后的完整代码 #

HTML

<div class="container">
  <img class="background-image" src="https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg" alt="Background Image">
  <!-- SVG仅用于定义遮罩，无需额外显示内容 -->
  <svg class="mask-def" viewBox="0 0 400 400">
    <defs>
      <mask id="xg-mask">
        <!-- 白色区域显示背景，黑色隐藏 -->
        <rect x="0" y="0" width="100%" height="100%" fill="#000"/>
        <!-- XG路径作为遮罩显示区域 -->
        <g fill="#fff">
          <path d="M122.3,236.1l-35.9,56.6H40.1l57.2-83.2l-55.6-82.9h47.6l33.5,54l34.3-54h47.1L148.1,208l57.7,84.8h-48.1L122.3,236.1z"/>
          <path d="M365.2,281.3c-19,10.3-40.9,15.4-65.9,15.4c-26.9,0-48.6-7.7-64.9-23c-16.3-15.3-24.5-36.5-24.5-63.4
            c0-27.1,8.1-48.5,24.2-64.2c16.1-15.7,37.9-23.5,65.4-23.5c25.7,0,46.5,4.8,62.5,14.4l-13.3,35.4c-15.9-9.2-31.9-13.8-47.8-13.8
            c-14.9,0-26.8,4.6-35.6,13.8c-8.9,9.2-13.3,21.5-13.3,37c0,16.8,4.2,29.9,12.5,39.1c8.3,9.2,20.3,13.8,35.9,13.8
            c9.7,0,18.6-1.7,26.6-5.1v-24.5H286v-33.5h79.2V281.3z"/>
        </g>
      </mask>
    </defs>
  </svg>
</div>

CSS

.container {
  position: relative;
  width: 100vw;
  height: 300vh; /* 设置足够高度，允许滚动 */
}
.background-image {
  position: fixed; /* 固定背景，滚动时仅遮罩变化 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 应用SVG遮罩 */
  mask: url(#xg-mask);
  -webkit-mask: url(#xg-mask); /* 兼容webkit内核浏览器 */
}
.mask-def {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden; /* 隐藏SVG本身，仅使用其定义的mask */
}

JavaScript

window.addEventListener('scroll', function() {
  const maskSvg = document.querySelector('.mask-def');
  const scrollTop = window.scrollY || window.pageYOffset;
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  // 计算滚动进度（0到1）
  const scrollProgress = Math.min(scrollTop / totalScrollHeight, 1);
  
  // 基于进度缩放遮罩：从初始大小（0.3倍视口）到铺满视口
  const scale = 0.3 + scrollProgress * 0.7;
  maskSvg.style.transform = `scale(${scale})`;
  // 保持遮罩居中
  maskSvg.style.transformOrigin = 'center center';
});

关键修改说明 #

1. 遮罩结构调整：将XG路径移到<mask>内部，用黑色矩形作为遮罩底色，白色XG路径作为显示区域，实现“只显示XG形状内的背景”效果
2. 容器与背景设置：容器设为300vh提供滚动空间，背景图设为fixed固定，滚动时仅遮罩缩放
3. 滚动逻辑优化：计算滚动进度，基于进度平滑缩放遮罩，避免无限放大，同时保持遮罩居中
4. 浏览器兼容：添加-webkit-mask兼容Chrome、Safari等webkit内核浏览器

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