如何让SVG遮罩响应式且保持阴影在圆形右下角？

核心问题分析 #

• 圆形半径使用固定像素值250，无法随视口尺寸缩放
• 阴影路径采用绝对坐标绘制，无法跟随圆形位置响应式调整
• 遮罩(mask)未设置宽高为100%，导致viewBox生效时遮罩区域不匹配SVG视口，出现失效

解决方案代码 #

CSS 保持不变

svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

修改后的SVG代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <defs>
    <!-- 修复遮罩：设置宽高为100%，确保覆盖整个视口 -->
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" height="100%" width="100%" fill="#fff"/>
      <!-- 圆形用百分比半径，实现响应式缩放 -->
      <circle cx="50%" cy="50%" r="25%" />
    </mask>
    <pattern id="img" patternUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </pattern>
    <!-- 使用filter创建阴影，自动跟随圆形适配 -->
    <filter id="circleShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="5%" dy="5%" stdDeviation="2%" flood-opacity="0.2"/>
    </filter>
  </defs>
  <!-- 应用阴影滤镜的圆形，替代原绝对路径阴影 -->
  <circle cx="50%" cy="50%" r="25%" filter="url(#circleShadow)" fill="#000"/>
  <rect width="100%" height="100%" mask="url(#mask)" fill-opacity="1" fill="url(#img)" />
</svg>

关键修改说明 #

1. 响应式圆形：将圆形半径从固定250改为25%，基于SVG视口的百分比单位，确保在任何尺寸下都保持相对大小
2. 修复遮罩失效：给<mask>元素添加width="100%" height="100%"，让遮罩区域完全匹配SVG视口，解决viewBox生效时遮罩不显示的问题
3. 固定右下角阴影：替换原绝对路径阴影为<filter>实现的feDropShadow，阴影偏移量dx="5%"、dy="5%"用百分比单位，始终固定在圆形右下角，自动随圆形缩放适配；同时调整filter的宽高范围，避免阴影被截断

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