Html SVG填充透明

我正在尝试使用wave SVG，我在身体上有一个背景图像 但是我希望SVG中填充透明的内容，以便显示身体背景图像 但是当我尝试使其

填充：透明

或

填充不透明度：0

它只是隐藏了所有的波形。那么，有没有一种方法可以用透明的显示身体背景图像的东西来代替#000000呢

下面是一个示例代码

*{
保证金：0；
填充：0；
}
身体{
背景图像：url（“https://wallpaperaccess.com/full/5131560.jpg");
}
标题{
最小高度：20雷姆；
背景色：青色；
位置：相对位置；
}
.形状{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
溢出：隐藏；
线高：0；
变换：旋转（180度）；
}
.形状svg{
位置：相对位置；
显示：块；
宽度：计算（128%+1.3px）；
身高：163px；
}
.形状.形状填充{
填写：#000000；
}

---

您可以在svg中使用clipPath

要获得好的结果，可能需要编辑SVG

*{
保证金：0；
填充：0；
}
身体{
背景图像：url（“https://wallpaperaccess.com/full/5131560.jpg");
}
标题{
最小高度：20雷姆；
背景色：青色；
位置：相对位置；
剪辑路径：url（#myClip）；
}
.形状{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
溢出：隐藏；
线高：0；
变换：旋转（180度）；
}
.形状svg{
位置：相对位置；
显示：块；
宽度：计算（128%+1.3px）；
身高：163px；
}
.形状.形状填充{
填写：#000000；
}

---

尝试创建一个新的svg来覆盖标题背景，并删除标题背景色

*{
保证金：0；
填充：0；
}
身体{
背景图像：url（“https://wallpaperaccess.com/full/5131560.jpg");
}
标题{
最小高度：20雷姆；
位置：相对位置；
}
.形状{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
溢出：隐藏；
线高：0；
}
.形状svg{
位置：相对位置；
显示：块；
宽度：100%；
高度：自动；
}

在黑色svg后面有一个背景色为青色的标题，因此当您使svg透明时，整个标题都会显示出来。你想干什么？你是想屏蔽标题，使其具有波浪形并显示猫的背景（具有波浪形的顶部边缘），还是想做其他事情？我只想将波浪形的#000000替换为透明（具有青色背景），以便显示猫的图像。如果我只是把填充：透明，它将显示青色背景，而不是猫的形象。感谢您的回复。形状没有青色背景，标题有。现在还不清楚你想在这里实现什么。下面是一个我想解释的例子：所以我想让它变成这样。你不能穿透另一个元素的背景。也许是一个面具，但即使那样我也不太自信。这正是我想要的。但有没有办法让它全屏显示，因为当我在全屏显示时，它只会停在屏幕的一半。非常感谢您的帮助。是的，您可以在clipPath标记中添加一个模式标记以使其重复，或者您也可以有一个更宽的SVG来表示3波。好的，我会尝试这样做。非常感谢您的时间和回答。致以最诚挚的问候。无需麻烦，编码愉快：）