如何实现带背景色的HTML Div通过SVG路径镂空（Knockout效果）

你现在用clip-path搞反了——它是保留路径内的内容、隐藏路径外的区域，而你要的是让SVG路径区域挖空，穿透红色背景显示后方内容，得换下面两种方法：

方法1：用SVG遮罩（mask）实现 #

遮罩的规则刚好匹配你的需求：白色区域显示原元素内容，黑色区域完全透明（穿透到后方）。

1. 修改你的SVG文件，把clipPath替换成mask，同时新增一个全宽高的白色矩形作为基底：

<mask id="myMask">
    <!-- 白色区域保留红色背景，黑色路径区域挖空 -->
    <rect width="100%" height="100%" fill="white" />
    <path fill="black" d="..." /> <!-- 这里放你原来的路径代码 -->
</mask>

2. 给header应用遮罩样式：

#header {
    background: red;
    mask: url(mySVGfile.svg#myMask);
    -webkit-mask: url(mySVGfile.svg#myMask); /* 兼容Chrome、Safari等webkit内核浏览器 */
}

方法2：纯CSS混合模式实现（无需外部SVG） #

如果你的SVG路径可以转成内联的data URI，直接用background-blend-mode就能搞定：

#header {
    background: 
        /* 内联SVG路径，黑色作为挖空层 */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 100"><path fill="black" d="..."/></svg>') center/cover no-repeat,
        red;
    background-blend-mode: destination-out; /* 上层黑色区域会挖空下层红色背景 */
}

注意事项 #

• 用外部SVG时，要确保SVG文件和页面同域，否则浏览器会拦截mask/clip-path的引用
• 如果把SVG直接内嵌到HTML里，样式里的路径引用要改成url(#myMask)
• 低版本IE不支持这些属性，若需兼容老浏览器，只能用图片拼接的替代方案

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