如何在SVG中创建蒙版？实现类似clip-path inset的镂空效果失败如何解决

• SVG <mask>的渲染规则为：mask内部白色区域对应被遮罩元素完全显示，黑色区域对应被遮罩元素完全透明。你当前仅在mask内放置了黑色的不规则路径，未设置全屏白色基础层，遮罩逻辑完全相反。
• 你使用的不规则路径坐标包含大量负值，超出了viewBox="0 0 200 200"的可视范围，形状无法正常渲染到页面上。

直接调整SVG的viewBox适配路径坐标，修正mask的层级逻辑即可达到预期镂空效果：

调整后HTML代码 #

<div class="aurora">
  <svg viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <mask id="mask1">
      <!-- 全屏白色基础层：对应被遮罩元素默认全部显示 -->
      <rect width="100%" height="100%" fill="white"/>
      <!-- 黑色镂空区域：对应位置被遮罩元素透明，透出下方极光效果 -->
      <path fill="black" d="M51,-41.9C63.3,-25.1,68.8,-4.1,65.3,16.4C61.8,37,49.5,57,33.3,62C17.1,67.1,-2.8,57.2,-24.3,47.8C-45.8,38.5,-68.9,29.7,-74.5,14.3C-80.2,-1.1,-68.5,-23.2,-53.2,-40.7C-37.9,-58.1,-19,-70.8,0.2,-70.9C19.3,-71.1,38.6,-58.6,51,-41.9Z" />
    </mask>
    <rect width="100%" height="100%" fill="white" mask="url(#mask1)"></rect>
  </svg>
  <div class="move1"></div>
  <div class="move2"></div>
  <div class="move3"></div>
</div>

调整后CSS补充代码 #

原有CSS无需修改，仅需补充SVG层级设置，确保遮罩层在极光效果之上：

.aurora svg {
  position: relative;
  z-index: 1;
}

• 纯CSS mask实现：将不规则路径转换为dataURI后直接写入CSS mask属性，无需内嵌SVG标签，代码更精简。
• clip-path镂空实现：使用带fill-rule="evenodd"的<clipPath>，先绘制全屏矩形再叠加内部镂空形状，直接绑定到白色背景层即可实现同等效果。

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