如何从 SVG 波中隐藏圆圈？答案

【问题标题】：How to hide circle from inside SVG wave?如何从 SVG 波中隐藏圆圈？
【发布时间】：2017-12-14 22:06:19
【问题描述】：

我有 SVG 波浪和一个圆圈。我需要从 SVG 内部隐藏圆圈。

我在 SVG 波形上设置了 z-index: -3;，在圆圈上设置了z-index:-1，在 div 上设置了z-index: 10;。

当用户滚动时，我必须从 SVG 内部隐藏那个圆圈。请查看我的第二张图片。由于 z-index，圆圈位于 wave 和示例 div 之间。

我无法正确解释。希望你能理解我的问题。

你能帮我解决这个问题吗？

body {
  margin: 0;
  padding: 0;
}

.parent_div {
  height: 600px;
  width: 100%;
}

.about_wave_1 {
  position: relative;
  top: 0;
  margin-top: 300px;
}

.about_wave {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: -3;
}

.ewSzGA path {
  fill: #00a2ff;
}

.bg_blue {
  background-color: #00a2ff;
  text-align: center;
  height: 200px;
}

.service-container {
  border-radius: 10px;
  position: fixed;
  z-index: -1;
  right: 0;
  top: 30px;
  opacity: 1;
}

.service_1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  background-color: #EFBD40;
  position: absolute;
  right: 205px;
  top: 0;
}

.service-container .service_1 h2 {
  margin: auto;
  color: #fff;
  font-size: 28px;
}

.example {
  background-color: #ff0000;
  height: 300px;
  width: 100%;
  border: 1px solid #000;
  z-index: 10;
}

<div class="parent_div">
  <div class="service-container">
    <div class="service_1 logo_bg">
      <h2>text</h2>
    </div>
  </div>
  <div class="about_wave_1">
    <div class="about_wave">
      <svg height="50" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
    </div>
  </div>
  <div class="example"></div>
</div>

我需要像这样的输出

【问题讨论】：

这样可以吗？
试试我的代码，希望对您的问题有所帮助
其实是的。试试我的代码，你会发现它是可能的 :) @NarendraVerma

标签： jquery html css svg

【解决方案1】：

您需要从 .about_wave 类中删除 position:absolute。

body {
    margin: 0;
    padding: 0;
}

.parent_div {
    height: 600px;
    width: 100%;
}

.about_wave_1 {
    position: relative;
    top: 0;
    margin-top: 300px;
}

.about_wave {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(180deg);
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: -3;
}

.ewSzGA path {
    fill: #00a2ff;
}

.bg_blue {
    background-color: #00a2ff;
    text-align: center;
    height: 200px;
}

.service-container {
    border-radius: 10px;
    position: fixed;
    z-index: -1;
    right: 0;
    top: 30px;
    opacity: 1;
}

.service_1 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    background-color: #EFBD40;
    position: absolute;
    right: 205px;
    top: 0;
}

.service-container .service_1 h2 {
    margin: auto;
    color: #fff;
    font-size: 28px;
}

.example {
    background-color: #ff0000;
    height: 300px;
    width: 100%;
    border: 1px solid #000;
    z-index: 10;
}

<div class="parent_div">
    <div class="service-container">
        <div class="service_1 logo_bg">
            <h2>text</h2>
        </div>
    </div>
    <div class="about_wave_1">
        <div class="about_wave">
            <svg height="50" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208">
                <path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z"
                    data-reactid="209"></path>
            </svg>
        </div>
    </div>

    <div class="example"></div>
</div>

【讨论】：

不，我需要从 SVG 内部隐藏圆圈。
圆圈隐藏在 SVG 中（蓝色波浪）
等一下，我正在上传预期的输出图像。
@NarendraVerma 你想躲到半波吗？？
不是一半，这取决于滚动。

【解决方案2】：

我认为你让它变得比它需要的更复杂。

我稍微简化了这个例子。然后我所做的就是将 SVG 变成两个半 SVG。一个用于波浪的顶部，一个用于底部。然后我简单地将上半部分放在后面，加上z-index: -1。

body {
  margin: 0;
  padding: 0;
}

.parent_div {
  height: 600px;
  width: 100%;
}

.about_wave_1,
.about_wave_2 {
  position: relative;
}

.about_wave_1 {
  margin-top: 250px;
  z-index: -1;
}

.about_wave_1 svg,
.about_wave_2 svg {
  display: block;
}

.ewSzGA path {
  fill: #00a2ff;
}

.service-container {
  position: fixed;
  right: 0;
  top: 30px;
}

.service_1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  background-color: #EFBD40;
  position: absolute;
  right: 205px;
  top: 0;
}

.service-container .service_1 h2 {
  margin: auto;
  color: #fff;
  font-size: 28px;
}

.example {
  position: relative;
  background-color: #ff0000;
  height: 300px;
  width: 100%;
  border: 1px solid #000;
  z-index: 10;
}

<div class="parent_div">
  <div class="service-container">
    <div class="service_1 logo_bg">
      <h2>text</h2>
    </div>
  </div>
  <div class="about_wave_1">
    <svg height="25" viewBox="0 0 1440 25" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
  </div>
  <div class="about_wave_2">
    <svg height="25" viewBox="0 25 1440 25" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
  </div>
  <div class="example"></div>
</div>

【讨论】：

【解决方案3】：

我想你想要这个：

body{
	margin: 0;
	padding: 0;
}
.parent_div{
	height: 600px;
	width: 100%;
    position: relative;
}
.parent_div:before {
   content: "";
   width: 100%;
   height: 20px;
   display: block;
   position: absolute;
   top: -20px;
   left: 0;
   background: #00a2ff;
   z-index: -2;
}
.about_wave_1{
	position: relative;
	top: 0;
	margin-top: 300px;
}
.about_wave{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(-180deg);
transform: rotate(180deg);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -3;
height: 50px;
background-color: #fff;
}
.ewSzGA path{
  fill: #00a2ff;
}

.bg_blue{
background-color:#00a2ff; 
text-align: center;	
height: 200px;
}

.service-container{
    border-radius: 10px;
    position: fixed;
    z-index: -1;
    right: 0;
    top: 30px;
    opacity: 1;
}

.service_1{
    width: 200px;
    height: 200px;
    border-radius: 50%;
   display: flex;
   background-color: #EFBD40;
   position: absolute;
   right: 205px;
   top: 0;
}
.service-container .service_1 h2{
    margin: auto;
    color: #fff;
    font-size: 28px;
}

.example{
	background-color: #ff0000;
	height: 300px;
	width: 100%;
	border:1px solid #000;
	z-index: 10;
}
object {
  position: relative;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="parent_div">
		<div class="service-container">
		    <div class="service_1 logo_bg"> <h2>text</h2></div>
		  </div>
<div class="about_wave_1" style="background:#fff;z-index:9999;">
	<div class="about_wave"  style="background:#fff;z-index:9999;">
		<svg  height="50" id="wave" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
	</div>
</div>

<div class="example"></div>
</div>

【讨论】：

我想从里面隐藏圆圈。现在那个圆圈显示在背面。我需要圆形正面和背面 SVG Wave，圆形不会越过波浪。

【解决方案4】：

通过以下方式尝试，我已将内联样式添加到这两个类 .about_wave_1、.about_wave，检查一次可能会对您有所帮助，将样式添加到 parent_div

body{
	margin: 0;
	padding: 0;
}
.about_wave_1{
	position: relative;
	top: 0;
	margin-top: 300px;
}
.about_wave{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(-180deg);
transform: rotate(180deg);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -3;
height: 50px;
background-color: #fff;
}
.ewSzGA path{
  fill: #00a2ff;
}
.bg_blue{
background-color:#00a2ff; 
text-align: center;	
height: 200px;
}
.service-container{
    border-radius: 10px;
    position: fixed;
    z-index: -1;
    right: 0;
    top: 30px;
    opacity: 1;
}
.service_1{
    width: 200px;
    height: 200px;
    border-radius: 50%;
   display: flex;
   background-color: #EFBD40;
   position: absolute;
   right: 205px;
   top: 0;
}
.service-container .service_1 h2{
    margin: auto;
    color: #fff;
    font-size: 28px;
}
.example{
	background-color: #ff0000;
	height: 300px;
	width: 100%;
	border:1px solid #000;
	z-index: 10;
}
object {
  position: relative;
  z-index: 2;
}
.parent_div{
	height: 600px;
	width: 100%;
  position: relative;
}
.parent_div:before {
   content: "";
   width: 100%;
   height: 20px;
   display: block;
   position: absolute;
   top: -20px;
   left: 0;
   background: #00a2ff;
   z-index: -9;
}

<div class="parent_div">
	<div class="service-container">
		<div class="service_1 logo_bg"><h2>text</h2></div>
	</div>
	<div class="about_wave_1" style="background:#fff;z-index:9999;">
		<div class="about_wave"  style="background:#fff;z-index:9999;">
			<svg  height="50" id="wave" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path></svg>
		</div>
	</div>
	<div class="example"></div>
</div>

【讨论】：

我想从 SVG 内部隐藏圆圈。现在那个圆圈正在显示背面。我需要圆形正面和背面 SVG Wave，圆形不会越过波浪。
现在再试一次@NarendraVerma