图像Z索引悬停多个SVG多边形 [英] Image z-index onhover mutiple SVG polygon

问题描述

我正在研究SVG，这里的概念是我彼此有两个图像.overlap，并使用svg多边形制作了五个不同的三角形.我的目标是实现第一次完全覆盖的图像显示，并且当悬停在三角形上时，需要显示背景.box框图像. 这是我提供覆盖图像之前的初始代码.

I'm working on SVG here my concept is I have two images .overlap with each other and using svg polygon I made five different triangles. my aim to achieve first overlay complete image display and when hover on triangles shapes background .box box image needs to display. This is my initial code before giving an overlay image.

.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

<div class="box">
  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

现在，我添加了叠加图像，该图像必须位于.box图像和polygons形状上方.现在，悬停我想以当前的多边形形状显示.box图片

Now I have added overlay image need to come above the .box image and polygons shapes. Now, hover I want to display .box image in a current polygon shape like this

代码在这里

.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

.overlay:hover polygon {
  z-index: 100;
}

.overlay {
  position: absolute;
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
  z-index: 10;
}

<div class="overlay"></div>
<div class="box">

  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

有人能帮我解决这个问题吗，我们需要调整div和多边形填充的z索引.

Can anyone help me out this on hover we need to adjust the z-indexes of the divs and polygon fill.

推荐答案

我将调整我以前的回答的代码如下所示:

I would adjust the code of my previous answer like below:

.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

<div class="box">
  <div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>

这里是一个插图，向您展示clip-path

Here is an illustration to show you the different points used in clip-path

具有相同图像:

.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url(https://picsum.photos/id/118/1000/800);
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

<div class="box">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

这篇关于图像Z索引悬停多个SVG多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！