如何从SVG波内隐藏圆圈？

时间：2017-12-14 12:26:01

标签： jquery css html5 css3 svg

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

我在SVG wave上设置了z-index: -3;，在圈子上设置了z-index:-1，例如div设置了z-index: 10;。

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

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

你能帮助我吗？

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

enter image description here

我需要输出 enter image description here

4 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试以下方式，我已经为这两个类添加了内联样式.about_wave_1，.about_wave，检查一次可能会对你有帮助，为parent_div添加样式

<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>
gem install mysql2 -v '0.4.10'

答案 2 :(得分：0)

我想你想要这个：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

我简化了一些例子。然后我所做的就是将SVG变成两个半SVG。一个用于波浪的顶部，一个用于底部。然后我只用<button type="button" id="lbtnStatus"><span class="label-success">Active</span></button> <script type="text/javascript"> $(document).ready(function () { $('#lbtnStatus').click(function () { if ($(this).find('span').hasClass("label-success")) $(this).find('span').removeClass("label-success").addClass("label-danger").text("InActive"); else $(this).find('span').removeClass("label-danger").addClass("label-success").text("Active"); }); }); </script> 将上半部分放在后面。

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;
}

相关问题
最新问题