Z-индекс изображения на нескольких многоугольниках SVG - PullRequest
Новая
       1

Z-индекс изображения на нескольких многоугольниках SVG

2 голосов
/ 13 июня 2019

Я работаю над SVG, моя концепция в том, что у меня есть два изображения .overlap друг с другом, и используя многоугольник SVG, я сделал пять разных треугольников.Моя цель состоит в том, чтобы добиться первого наложения полного отображения изображения, и когда при наведении курсора на треугольники формируется фон .box, изображение коробки должно отображаться.Это мой исходный код перед наложением изображения. 

.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 в текущей форме многоугольника, например: iamge

Код здесь 

.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>

Может ли кто-нибудь помочь мне в этом при наведении курсора, нам нужно отрегулировать z-индексы элементов div и заполнения полигонов.

Ответы [ 3 ]

2 голосов
/ 13 июня 2019

Я бы изменил код мой предыдущий ответ , как показано ниже: 

.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

enter image description here

С таким же изображением: 

.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>
2 голосов
/ 14 июня 2019

Решение Temani только для CSS отлично, однако, учтите, что все еще не поддерживается ни в Safari, ни в IE / Edge .

. Для этих браузеров вы 'Вам понадобится откат на SVG, который также реализует элемент <clipPath>. 

.overlay {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}
.overlay use {
  opacity: 0;
}
.overlay use:hover {
  opacity: 1;
}
<svg class="overlay" viewBox="0 0 200 100">
  <defs>
    <clipPath id='clip-1'>
      <polygon points="0,100 100,100 0,50"/>
    </clipPath>
    <clipPath id='clip-2'>
      <polygon points="0,50 100,100 50,00 0,0"/>
    </clipPath>
    <clipPath id='clip-3'>
      <polygon points="100,100 50,00 150,0"/>
    </clipPath>
    <clipPath id='clip-4'>
      <polygon points="100,100 200,50 200,0 150,0"/>
    </clipPath>
    <clipPath id='clip-5'>
      <polygon points="100,100 200,100, 200,50"/>
    </clipPath>
    <image id="img" x="0" y="0" width="200" height="100" preserveAspectRatio="xMidYMid slice"
      xlink:href="https://picsum.photos/id/1/1000/800" />
  </defs>
  <use xlink:href="#img" clip-path="url(#clip-1)"/>
  <use xlink:href="#img" clip-path="url(#clip-2)"/>
  <use xlink:href="#img" clip-path="url(#clip-3)"/>
  <use xlink:href="#img" clip-path="url(#clip-4)"/>
  <use xlink:href="#img" clip-path="url(#clip-5)"/>
</svg>
<div class="box"></div>

Так что, да, это более многословно, но оно должно работать в любом браузере начиная с IE9.

0 голосов
/ 13 июня 2019

Если вы хотите, чтобы svg отображался выше родительского div, вы можете изменить атрибуты элемента svg, как показано ниже: 

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   /*necessary for expanding .box div and svg*/
   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   html,body{
    width:100%;
    height:100%;
   }
   
   .box {
      width:100%;
      height:100%;
      
      position: relative;
      background-image: url('https://picsum.photos/id/1/1000/800');
      background-repeat: no-repeat;
      width: 100%;
      
      /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /*I CHANGED HEIGHT TO 100% FOR BOX AS IT WASNT SPANNING THE ENTIRE PAGE - in turn, the "overlay"
      div's background image could be seen...*/
      /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      height: 100%;
      background-size: cover;
    }
    
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /*position the svg element relative to its parent so it can be moved up with z-index*/
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    svg{
      position:relative;
      z-index:999;
    }

    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: 100%;
      background-size: cover;
      z-index: 10;
    }
<div class="overlay"></div>
<div class="box">

  <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  <!--in order to make the svg span the entirety of its parent, I set width and height attributes
  for it to 100%-->
  <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  <svg width="100%" height="100%" preserveAspectRatio="none" viewbox="0 0 200 100">
    <polygon points="0,100 100,100 0,50 "
          style="stroke:#000000;"/>
    <polygon points="0,50 100,100 50,0 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...