SVG Mask实现圆形镂空用户图标失败，求技术解决方案

我来帮你理清SVG mask的核心逻辑，你遇到的问题其实是没搞清楚mask的黑白显示规则——这是新手用mask时很容易踩的坑！

先搞懂SVG Mask的关键规则： #

• 白色区域：对应下方元素的显示部分
• 黑色区域：对应下方元素的隐藏部分
• 未填充/描边的透明区域，在mask里默认等同于黑色（也就是隐藏）

你的尝试为什么不对？ #

1. 第一个代码里，mask里的元素用了stroke="black"且没有填充：
   因为mask里大部分区域是透明（默认黑色），只有细线条是黑色，所以整个大圆形会被完全隐藏，自然就看不到了。
2. 第二个代码用了stroke="white"：
   只有mask里的白色线条区域会让下方圆形显示，所以最终只看到用户图标线条，而不是圆形镂空的效果。

正确的实现代码 #

我们需要让mask里除了用户图标之外的区域都是白色（这样大圆形显示），用户图标区域是黑色（这样对应位置的圆形被隐藏，实现镂空）：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义镂空用的mask -->
  <mask id="userHole">
    <!-- 先画覆盖整个画布的白色矩形，确保默认大圆形全显示 -->
    <rect width="24" height="24" fill="white"/>
    <!-- 用户图标：用黑色填充+描边，这些区域会让下方圆形隐藏 -->
    <circle cx="12" cy="9" r="3" fill="black" stroke="black" stroke-width="2"/>
    <path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black" stroke-width="2"/>
  </mask>
  <!-- 黑色大圆形，应用mask后实现镂空 -->
  <circle cx="12" cy="12" r="12" fill="black" mask="url(#userHole)"/>
</svg>

代码解释 #

• 白色矩形覆盖整个SVG画布，保证大圆形默认全部显示；
• 用户图标用黑色填充和描边，这些黑色区域在mask中会“挖掉”对应位置的黑色圆形，形成镂空效果；
• 调整stroke-width可以改变用户图标的线条粗细，你可以根据需求修改这个值。

替代方案（用白色大圆形代替矩形） #

如果你觉得矩形不够贴合，也可以用和外层黑色圆形一样大小的白色圆形来代替矩形，效果完全一致：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="userHole">
    <circle cx="12" cy="12" r="12" fill="white"/>
    <circle cx="12" cy="9" r="3" fill="black" stroke="black" stroke-width="2"/>
    <path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black" stroke-width="2"/>
  </mask>
  <circle cx="12" cy="12" r="12" fill="black" mask="url(#userHole)"/>
</svg>

这样就能得到你想要的黑色圆形中间镂空用户图标的效果啦！

内容的提问来源于stack exchange，提问作者Kay van Bree