如何使用形状创建透明遮罩？SVG白色图形转透明方法

我有如下SVG代码：

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#a)">
        <path d="M0 0h20v20H0V0z" fill="#0D4AF9" />
        <path fill-rule="evenodd" clip-rule="evenodd"
              d="M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
              fill="#fff"/>
    </g>
    <defs>
        <clipPath id="a">
            <rect width="20" height="20" rx="2"/>
        </clipPath>
    </defs>
</svg>

该代码渲染效果如下：

请问如何将其中的白色线条和圆形改为透明？我尝试过创建mask，但完全是新手，同时想了解如何使用形状创建透明遮罩。

要实现白色元素变为透明（即让蓝色背景在对应位置镂空），最直接的方法是使用SVG的<mask>遮罩，以下是具体实现步骤和原理：

方法一：使用Mask实现镂空效果 #

Mask的核心逻辑：遮罩中白色区域会显示原图形，黑色区域会隐藏原图形，灰色则呈现半透明。我们只需把原来的白色元素转化为遮罩的“隐藏区域”，修改后的代码如下：

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 定义遮罩和裁剪路径 -->
    <defs>
        <clipPath id="a">
            <rect width="20" height="20" rx="2"/>
        </clipPath>
        <!-- 新增的镂空遮罩 -->
        <mask id="holeMask">
            <!-- 遮罩基础层：白色，确保默认区域全部显示 -->
            <rect width="20" height="20" fill="#fff"/>
            <!-- 原白色图形改为黑色，作为需要镂空的区域 -->
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
                  fill="#000"/>
        </mask>
    </defs>

    <!-- 同时应用裁剪路径和遮罩 -->
    <g clip-path="url(#a)" mask="url(#holeMask)">
        <!-- 仅保留蓝色背景层 -->
        <path d="M0 0h20v20H0V0z" fill="#0D4AF9" />
    </g>
</svg>

关键细节说明 #

1. 在<defs>中新增<mask>标签，设置唯一id（如holeMask）
2. 遮罩内先绘制全屏白色矩形：这是默认显示区域，保证整个蓝色背景能正常渲染
3. 将原白色图形的填充色改为黑色：黑色区域会让对应位置的蓝色背景被隐藏，形成透明镂空效果
4. 给蓝色背景所在的<g>标签添加mask="url(#holeMask)"属性，完成遮罩应用

形状创建透明遮罩的基础步骤总结 #

• 在<defs>中定义<mask>标签
• 遮罩内先绘制覆盖整个画布的白色形状，确保默认区域可见
• 在白色形状上方绘制需要镂空的黑色形状，这些位置最终会变成透明
• 给需要应用遮罩的元素/组添加mask="url(#遮罩id)"属性

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