如何实现滚动时SVG遮罩层缩放动画效果

在网页交互设计中，滚动时让SVG遮罩层产生缩放动画，能够增强页面的层次感与视觉引导。通过监听滚动位置并计算比例，我们可以动态改变SVG内部遮罩图形的缩放值，从而实现跟随滚动的动效。

基础HTML与SVG结构

先准备一个包含SVG遮罩定义的容器，以及被遮罩的内容。下面代码中，我们使用<mask>定义一个圆形遮罩，并将它应用到一个矩形上。

<svg width="0" height="0">
  <defs>
    <mask id="scaleMask">
      <rect width="100%" height="100%" fill="black"/>
      <circle id="maskCircle" cx="50%" cy="50%" r="30%" fill="white"/>
    <mask>
  </defs>
</svg>
<div class="content" style="mask: url(#scaleMask); -webkit-mask: url(#scaleMask);">
  被遮罩显示的内容区域
</div>

监听滚动并计算缩放

通过监听window的scroll事件，根据已滚动距离与文档总可滚动高度，计算出一个0到1之间的进度值，再用该值设置circle的r属性或transform缩放。

// 获取遮罩圆形元素
const circle = document.getElementById('maskCircle');

function updateMaskOnScroll() {
  // 当前滚动距离
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  // 可滚动总高度
  const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
  // 计算进度 0~1
  let progress = maxScroll > 0 ? scrollTop / maxScroll : 0;
  // 基础半径30%，随进度放大到60%
  const radius = 30 + progress * 30;
  circle.setAttribute('r', radius + '%');
}

window.addEventListener('scroll', updateMaskOnScroll);
updateMaskOnScroll();

使用transform优化性能

直接改r属性会触发重绘，若使用transform: scale()则可由合成层处理，更流畅。我们可给circle包一层<g>并缩放它。

<g id="maskGroup">
  <circle cx="50%" cy="50%" r="30%" fill="white"/>
</g>

const group = document.getElementById('maskGroup');

function scaleMask(progress) {
  // 从1倍缩放到2倍
  const scale = 1 + progress;
  group.setAttribute('transform', 'translate(400 300) scale(' + scale + ') translate(-400 -300)');
}

注意事项

• 滚动事件频繁触发，建议加节流或requestAnimationFrame。
• 移动端注意mask兼容性，部分旧浏览器需用-webkit-mask。
• SVG坐标使用百分比时，transform原点需自行换算。

合理运用SVG遮罩与滚动联动，能用少量代码做出高级感页面过渡，是前端动效中的实用技巧。

SVGmask_animationscroll_event修改时间：2026-07-30 02:57:17