如何使用Clip Path实现SVG背景的透明效果？

核心逻辑 #

要让图案里的线条区域透出底层背景，本质是把深灰色矩形中对应线条的部分“挖空”。SVG的<mask>（遮罩）是最适合的工具：遮罩内的白色区域会保留应用它的图形，黑色区域会让图形对应位置透明。

分步修改 #

• 添加遮罩定义：在<defs>里新增<mask>标签，ID设为lineMask方便引用。
  • 先在遮罩里放一个白色矩形，覆盖整个图案范围——这会让深灰矩形默认全部显示。
  • 把原有的红色path移到遮罩里，把描边颜色改成黑色——这会让线条对应的位置变成透明区域。
• 给矩形应用遮罩：在原深灰色矩形上添加mask="url(#lineMask)"属性，这样矩形就会按照遮罩的规则显示：线条位置透明，其他区域保留深灰色。
• 移除原红色path：因为现在不需要它直接显示，它的作用已经由遮罩里的path代替。

修改后的完整代码 #

<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <mask id="lineMask">
            <!-- 白色区域保留原图形，黑色区域让原图形透明 -->
            <rect x='0' y='0' width='100%' height='100%' fill="white"/>
            <path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'  stroke-width='1' stroke='black' fill='none'/>
        </mask>
        <pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(2) rotate(0)'>
            <!-- 给深灰矩形应用遮罩，线条区域就会透明 -->
            <rect x='0' y='0' width='100%' height='100%' fill='rgb(54, 54, 54)' mask="url(#lineMask)"/>
        </pattern>
    </defs>
    <rect width='800%' height='800%' transform='translate(-44,0)' fill='url(#a)'/>
</svg>

效果说明 #

修改后，当你把这个SVG作为背景时，深灰色图案上的线条区域会变成透明，直接透出底层的背景内容。

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