如何使用形狀創建透明蒙版-有解無憂

鑒于我有一個 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>

呈現如下：

如何使用形狀創建透明蒙版

怎樣才能讓那些白線和圓圈變得透明呢？我嘗試創建面具，但完全是菜鳥。

uj5u.com熱心網友回復：

您可以加入d2 條路徑的屬性并使用fill-rule="evenodd"，使路徑的第二部分成為一個洞。

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>

觀察：我改變了 svg 元素的大小。您可以將其更改回您需要的內容。

uj5u.com熱心網友回復：

將你想要的元素拆分到另一個路徑，然后更改填充。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533202.html

標籤：csssvg

上一篇：如何解決這個僅在iPhone上出現的放大SVG渲染問題？

下一篇：在選單上選擇不同選項時更改SVG填充