本文旨在指导开发者如何利用SVG遮罩（mask）和JavaScript实现一个在页面滚动时，SVG遮罩层能够动态缩放并适配视口的效果。通过本文，你将学习到SVG遮罩的基本原理、CSS样式设置以及JavaScript控制SVG元素属性的方法，最终实现一个具有吸引力的视觉效果。
SVG遮罩原理
SVG遮罩通过
准备工作
首先，我们需要准备HTML结构、CSS样式以及SVG元素。
HTML结构：
CSS样式：
body {
margin: 0;
height: 400vh; /* 为了产生滚动效果 */
}
.container {
margin-top: 100vh;
}在这个例子中，body的高度设置为400vh，目的是让页面可以滚动，从而触发我们的滚动事件。.container 元素被添加了 margin-top: 100vh;，这会将其向下推，使得初始状态下 SVG 元素不在视口中，当滚动到一定位置时，SVG 元素才会进入视口，从而触发缩放效果。
SVG元素说明：
- svg viewBox="0 0 3000 1500">: 定义了SVG的视窗大小。
: 用于定义可重复使用的SVG元素，例如我们的遮罩。 : 定义了一个ID为"m1"的遮罩，填充色为白色。 : 将遮罩内容移动到SVG的中心位置。 : 对遮罩内容进行微调，使其中心点更符合缩放需求。 : 定义构成遮罩形状的路径。这里使用了两个 元素来创建字母形状。 : 使用遮罩"m1"来遮罩图片。
JavaScript实现滚动缩放
接下来，我们将使用JavaScript监听scroll事件，并根据滚动距离动态调整SVG遮罩的缩放比例。
window.addEventListener('scroll', function() {
var container = document.querySelector('.container');
let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;
s = (s > 1) ? 0 : 1-s;
var maskgroup = document.querySelector('#m1 g');
maskgroup.setAttribute('transform', `translate(1500 750) scale(${1 + s * 90})`);
});代码解释：
- window.addEventListener('scroll', function() { ... });: 监听scroll事件。
- var container = document.querySelector('.container');: 获取包含SVG的容器元素。
- let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算缩放比例。 container.offsetTop 是容器顶部距离文档顶部的距离，container.clientHeight*.5 是容器高度的一半，window.scrollY 是垂直滚动条滚动的距离。这个公式的核心思想是根据容器在视口中的位置来计算一个比例值。当容器顶部接近视口顶部时，s 接近 1，当容器完全离开视口时，s 接近 0。
- s = (s > 1) ? 0 : 1-s;: 将比例值限制在0到1之间，并进行反转。 (s > 1) ? 0 : 1-s 是一个三元运算符，如果 s 大于 1，则将其设置为 0，否则将其设置为 1-s。这样做是为了确保缩放比例不会超出范围，并且在容器进入视口时开始缩放。
- var maskgroup = document.querySelector('#m1 g');: 获取遮罩中包含路径的
元素。 - maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 设置
元素的transform属性，实现缩放效果。translate(1500 750)保持中心位置，scale(${1 + s 90})根据滚动距离动态调整缩放比例。1 + s * 90确保缩放比例从 1 开始，并根据s的值进行放大。这里的90` 是一个缩放因子，可以根据需要调整以改变缩放的程度。
注意事项
- 性能优化： 滚动事件触发频率很高，频繁操作DOM可能导致性能问题。可以考虑使用requestAnimationFrame来优化性能。
- 兼容性： 确保代码在不同浏览器上的兼容性。
- 调整参数： 根据实际需求调整SVG的viewBox、遮罩的形状和位置，以及JavaScript中的缩放比例计算公式。
- 初始状态： 确保在页面加载时，SVG 元素处于正确的初始状态。如果需要，可以在页面加载完成后立即触发一次滚动事件，以设置初始的缩放状态。
总结
通过本文，你学习了如何使用SVG遮罩和JavaScript实现滚动时动态缩放的效果。这个技术可以应用于各种场景，例如创建引人注目的页面滚动动画、突出显示特定内容等。希望这个教程能帮助你掌握SVG遮罩的用法，并在你的项目中创造出更具吸引力的用户体验。
