如何使用SVG作为clip-path裁剪适配视口宽度的滚动圆形动画

第一步：调整SVG结构（封装为专用裁剪路径） #

将你的XG图形放入<clipPath>标签内，配置适配容器的单位规则，同时隐藏SVG避免占用页面空间：

<svg class="svg_clip" style="position: absolute; width: 0; height: 0;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 554.41 358.76">
  <defs>
    <!-- 配置裁剪路径单位为适配容器的相对比例 -->
    <clipPath id="xgClip" clipPathUnits="objectBoundingBox">
      <!-- 按原始viewBox比例缩放路径到0-1范围，避免拉伸变形 -->
      <g transform="scale(0.0018037, 0.002788)">
        <path d="M401.64,164.38c-6.25,13-5.08,28.09-13.94,40.8-9.2,13.16-18.28,26.48-27.76,39.47-5,6.91-11.43,12.93-17.45,19.12s-10.53,6.41-16.27.22c-11.32-12.21-22.24-24.75-33.45-37-3.51-3.85-4.23-7.75-1.84-12.27,2.07-4,3.68-8.24,6.3-11.81,8.08-11.15,13.88-22.86,11.82-37.24-.78-5.24,3-6.41,7.3-6.41,13.55-.05,27.09,0,40.64,0,12.87,0,25.81-.05,38.68,0C399,159.31,403.42,160.65,401.64,164.38Z" transform="translate(-142.59 -152.72)"/>
        <path d="M697,388.72c0,42.59-8,122.76-129.77,122.76-56.15,0-109.3-11.61-124.8-68.66a11.48,11.48,0,0,1,11-14.52h62.36a11.18,11.18,0,0,1,10.66,7.37c2.48,7.27,6.56,12.11,12.7,15.18,7.51,4,18,5.51,31.07,5.51,40.58,0,44.59-28.56,44.59-60.63V371.18h-1a82.35,82.35,0,0,1-69.15,38.08C466,409.26,430.44,353.14,430.44,280c0-69.15,40.58-127.27,114.24-127.27,31.07,0,54.61,13.53,69.65,40.08h1V171.65a11.41,11.41,0,0,1,11.41-11.42h58.85A11.41,11.41,0,0,1,697,171.65ZM565.22,217.86c-37.57,0-49.6,33.07-49.6,65.13,0,30.57,14,61.13,49.1,61.13,36.08,0,51.61-28.05,51.61-60.63C616.33,250.43,603.31,217.86,565.22,217.86Z" transform="translate(-142.59 -152.72)"/>
        <path d="M187.18,158.92h36.91c4.47,0,6.75,1.72,7.51,6.67,4.41,28.94,19.09,52.67,38.75,73.59,24.77,26.36,50,52.26,74.59,78.8,19.22,20.78,37.85,42.16,48.89,68.78,2.17,5.25,4.31,10.87,4.69,16.44,1.37,20.56-.25,16.78-16.15,16.86-20.07.11-40.15-.07-60.22.1-6,.06-8.89-1.22-10-8.24-4.28-26.74-18.07-48.88-35.49-69.05-3.11-3.59-5.25-4.52-9-.46-17.85,19.17-30.24,41.15-35.93,66.83-2.37,10.67-2.47,10.78-13.06,10.83-21.37.09-42.74.2-64.11-.05-10.36-.13-10.57-1.34-9.68-12.29,1.85-23,14.82-40.91,27.36-58.56,9.65-13.58,21.87-25.35,33.16-37.73,6.54-7.17,13.5-13.95,20.27-20.9-6.2-7.07-12.51-14.06-18.57-21.24-13.69-16.21-27.75-32.13-40.73-48.89C154,204.5,147.12,186,142.91,166.27c-1.24-5.8,1.21-7.13,5.42-7.21,12.95-.25,25.9-.09,38.85-.09Z" transform="translate(-142.59 -152.72)"/>
      </g>
    </clipPath>
  </defs>
</svg>

第二步：调整CSS裁剪配置 #

修改clip-path的引用目标为刚才定义的clipPath节点：

section {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  background: url(background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 引用自定义XG裁剪路径，可选加webkit前缀兼容老版本浏览器 */
  clip-path: url(#xgClip);
  -webkit-clip-path: url(#xgClip);
}

第三步：对接滚动动画逻辑 #

复用你原有的滚动监听逻辑，调整为控制裁剪路径的缩放和位置即可：

const xgClip = document.getElementById('xgClip');
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;

function updateScrollClip() {
  // 计算滚动进度，范围0-1
  const progress = window.scrollY / maxScroll;
  // 可自行调整初始缩放值和最大缩放值，此处示例初始为视口20%大小，滚动到底部放大到1.5倍充满屏幕
  const scale = 0.2 + progress * 1.3;
  // 保持裁剪图形居中显示，translate偏移值固定为(1 - scale)/2
  xgClip.setAttribute('transform', `translate(${(1 - scale)/2}, ${(1 - scale)/2}) scale(${scale})`);
  requestAnimationFrame(updateScrollClip);
}

updateScrollClip();

核心注意点 #

• 不可直接引用SVG根节点作为裁剪源，必须将图形封装在<clipPath>标签内才能被正确识别
• clipPathUnits="objectBoundingBox"是适配不同视口宽度的核心配置，默认的固定坐标模式无法响应容器尺寸变化
• 路径缩放比例要和原始SVG的viewBox尺寸对应，避免XG图形拉伸变形
• 如需保留原圆形裁剪的位置跟随逻辑，只需修改JS中translate的计算规则即可，和原有逻辑完全兼容

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