如何使SVG遮罩随容器元素正确缩放？

AI 小北

2026-6-18

解决SVG遮罩无法适配容器缩放的问题

核心处理思路

要让大尺寸（4000×7000）的SVG遮罩正确适配容器，关键是通过viewBox锚定SVG的原始坐标系统，配合容器约束与正确的遮罩单位设置，实现比例适配。

具体解决步骤

给SVG添加viewBox与缩放控制属性
为SVG设置viewBox="0 0 4000 7000"，明确其原始坐标范围，确保缩放时保持正确比例。同时设置width="100%"、height="100%"，并通过preserveAspectRatio控制缩放行为：

用preserveAspectRatio="xMidYMid slice"：按比例裁剪遮罩，填满容器
用preserveAspectRatio="xMidYMid meet"：按比例完整显示遮罩，容器可能留空白

示例SVG结构：

<svg width="100%" height="100%" viewBox="0 0 4000 7000" preserveAspectRatio="xMidYMid slice">
  <mask id="customMask">
    <!-- 这里放你的遮罩内容，比如渐变 -->
    <linearGradient id="maskGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="white" stop-opacity="1"/>
      <stop offset="100%" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <rect width="100%" height="100%" fill="url(#maskGrad)"/>
  </mask>
</svg>

配置遮罩的单位属性
确保mask元素的maskUnits="objectBoundingBox"（默认值，基于应用遮罩的元素边界盒计算），maskContentUnits="userSpaceOnUse"（使用SVG的viewBox坐标系统），让遮罩内容随SVG缩放适配容器。

约束应用遮罩的容器
给目标div设置明确的尺寸（或继承父容器尺寸），并添加overflow: hidden防止遮罩溢出：

.masked-container {
  width: 100%;
  max-width: 600px;
  height: auto;
  overflow: hidden;
  mask: url(#customMask);
  -webkit-mask: url(#customMask); /* 兼容webkit内核浏览器 */
}