Question

我正在尝试使用 wave SVG 并且我在身体上有一个背景图像但我希望 SVG 填充透明，以便显示主体背景图像但是当我尝试使它成为 fill: transparent 或 fill-opacity: 0

它只是隐藏了所有的波形。那么有没有办法用显示身体背景图像的透明内容替换#000000？

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
    min-height: 20rem;
    background-color: cyan;
    position: relative;
}

.shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.shape svg {
    position: relative;
    display: block;
    width: calc(128% + 1.3px);
    height: 163px;
}

.shape .shape-fill {
    fill: #000000;
}

<html>

<body>
<header>
<div class="shape">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>
</div>
</header>
</body>
</html>

感谢您的帮助，最好的问候。

Answer 1

您可以在 svg 中使用 clipPath

要获得不错的结果，您可能需要编辑 SVG

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
  min-height: 20rem;
  background-color: cyan;
  position: relative;
  clip-path: url(#myClip);
}

.shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.shape svg {
  position: relative;
  display: block;
  width: calc(128% + 1.3px);
  height: 163px;
}

.shape .shape-fill {
  fill: #000000;
}

<html>

<body>
  <header>
    <div class="shape">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <clipPath id="myClip">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
        </clipPath>
    </svg>
    </div>
  </header>
</body>

</html>

Answer 2

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

* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
min-height: 20rem;
position: relative;
}

.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}

.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}

<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>

</div>
</header>

https://jsfiddle.net/afelixj/7z1L5xdo/3/

SVG 填充透明

2 个答案: