SVG 填充透明答案

【问题标题】：SVG fill transparentSVG 填充透明
【发布时间】：2021-05-17 17:03:57
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

您在黑色 svg 后面有一个背景颜色为青色的标题，因此当您使 svg 透明时，整个标题都会显示出来。你想做什么？您是要遮盖标题，使其具有波浪形并显示猫背景（顶部边缘为波浪形），还是要尝试做其他事情？
我只想将波浪形状的#000000 替换为透明（带有青色背景），以便显示猫图像。如果我只放 fill: transparent 它将显示青色背景而不是猫图像。感谢您的回复。
形状没有青色背景，但标题有。目前尚不清楚您要在这里实现什么目标。
这是我试图解释的一个例子：prnt.sc/131m58d 所以我想把它变成这样。
你不能像这样切开另一个元素的背景。也许是一个面具，但即使那样我也不会过于自信。

标签： html css svg

【解决方案1】：

您可以将 clipPath 与您的 svg 一起使用

要获得好的结果，您可能需要编辑 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>

【讨论】：

这正是我想要的。但是有没有办法让它全宽，因为当我在全屏时它只会停在屏幕的一半处。非常感谢您的帮助。
是的，您可以在clipPath标签中添加一个模式标签以使其重复
或者你也可以有一个更宽的 SVG，代表 3 个波浪
好的，我会努力的。非常感谢您的时间和回答。最好的问候。
不打扰，快乐编码:)

【解决方案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/

【讨论】：

【解决方案3】：

对于透明，您可以在路径中将“填充-不透明度”定义为 0：

<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" fill-opacity="0"></path>
    </svg>
</div>
</header>
</body>
</html>

【讨论】：