How to create a transparent mask using shape-CodePudding

Given I have a svg as follows:

<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>

which renders like:

How can one make those white lines and circles transparent? I tried creating masks but a total noob.

CodePudding user response：

You can join the d attributes of the 2 paths and use fill-rule="evenodd" so that the second part of the path became a hole.

body{background:silver}

<svg width="200" height="200" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#a)">
        <path d="M0 0h20v20H0V0z 
        
        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="#0D4AF9" fill-rule="evenodd" 
             />
    </g>
    <defs>
        <clipPath id="a">
            <rect width="20" height="20" rx="2"/>
        </clipPath>
    </defs>
</svg>

Observation: I've changed the size of the svg element. You can change it back to what you need.

CodePudding user response：

Split out the element you want to another path, and then change the fill.