如何使用SVG文本裁剪背景div，替代曲线、圆形等常规裁剪形状

核心用SVG遮罩（mask）实现，比clip-path更适合做挖空效果，完整可运行代码如下：

完整代码 #

HTML #

<svg width="0" height="0" style="position:absolute;">
  <defs>
    <mask id="textCutMask">
      <!-- 保留div的完整区域，和div圆角保持一致 -->
      <rect width="600" height="300" fill="white" rx="20"/>
      <!-- 黑色文本区域为要裁掉的部分，位置和原span对齐 -->
      <text x="550" y="70" font-size="140" font-weight="bold" fill="black" text-anchor="end">289</text>
    </mask>
  </defs>
</svg>
<div></div>

CSS #

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
}

body {
  padding:6rem;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
}

div {
  position:relative;
  width:600px;
  height:300px;
  background:#c8c8c8;
  border:5px solid #bbb;
  border-radius:20px;
  /* 应用SVG遮罩实现文本挖空 */
  mask: url(#textCutMask);
  filter:
    drop-shadow(0  1px  1px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
    drop-shadow(0  2px  2px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
    drop-shadow(0  4px  4px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
    drop-shadow(0  8px  8px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
    drop-shadow(0 16px 16px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075));
}

关键说明 #

• 之前用clip-path没达到效果是因为clip-path默认定义的是要保留的区域，要做挖空的反向裁剪需要额外配置填充规则，用mask实现逻辑更直观，更适合这类场景
• mask遮罩规则：白色对应元素显示区域，黑色对应元素透明（被裁剪）区域
• 给SVG的text添加text-anchor="end"实现文本右对齐，方便匹配原代码中右侧定位的需求，调整x和y属性即可微调文本的裁剪位置
• 如果需要保留原红色文本显示，可在div中再加原来的span元素，设置z-index高于div即可

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