Выявить изображение на элементе SVG

Question

Здесь Я получил ответ, как полностью переписать перекос div с помощью svg. Работает отлично. Но мне нужен особый эффект, когда перекошенный div наведен - раскрыть изображение.

Вот демонстрация , показывающая, чего я хочу достичь с помощью альфа-канала.

И здесь - моя разметка с тегом <image> и полным svg. Проблема в том, что <image> не раскрывается и, как я понимаю, специальные атрибуты, такие как width & height, должны быть указаны в теге image. Я хочу, чтобы это было отзывчивым, и все было сосредоточено.

CSS

.oblique-block g image {  
  opacity: 100%;
  filter: alpha(opacity=100);  
  height: 100%;  
  z-index: 9999;
  width: 458px;
}

.oblique-block a :hover.icon image {
  z-index: 999;
  opacity: 0.3;
  filter: alpha(opacity=30);
  max-width: none;

    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;  
}

.oblique-block {
 width:100%;
 height:100%;

 }
.oblique-block text {
    font-size:14px;
    font-weight:bold;
    fill:white;
    text-anchor:middle;
}

разметка с SVG

.oblique-block g image {  
  opacity: 100%;
  filter: alpha(opacity=100);  
  height: 100%;  
  z-index: 9999;
  width: 458px;
}

.oblique-block a :hover.icon image {
  z-index: 999;
  opacity: 0.3;
  filter: alpha(opacity=30);
  max-width: none;
    
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;  
}

.oblique-block {
 width:100%;
 height:100%;
 
 }
.oblique-block text {
	font-size:14px;
	font-weight:bold;
	fill:white;
	text-anchor:middle;
}

    <div class="oblique-block">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
    	  <a href="#" title="Meet the creators" target="_self">
    		  <g class="icon">
    			 <path scale(0.8)="" id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z"></path>
    			 <!-- icon supervisor -->          		 
    			 <path class="icon" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M15 3.92883C10.4897 3.92883 6.83337 7.58517 6.83337 12.0955C6.83337 16.6058 10.4897 20.2622 15 20.2622C19.5104 20.2622 23.1667 16.6058 23.1667 12.0955C23.1667 7.58517 19.5104 3.92883 15 3.92883ZM9.83337 12.0955C9.83337 9.24203 12.1466 6.92883 15 6.92883C17.8535 6.92883 20.1667 9.24203 20.1667 12.0955C20.1667 14.949 17.8535 17.2622 15 17.2622C12.1466 17.2622 9.83337 14.949 9.83337 12.0955ZM8.33329 23.9288C3.82297 23.9288 0.166626 27.5852 0.166626 32.0955V35.4288C0.166626 36.2573 0.838199 36.9288 1.66663 36.9288C2.49505 36.9288 3.16663 36.2573 3.16663 35.4288V32.0955C3.16663 29.242 5.47982 26.9288 8.33329 26.9288H21.6666C24.5201 26.9288 26.8333 29.242 26.8333 32.0955V35.4288C26.8333 36.2573 27.5049 36.9288 28.3333 36.9288C29.1617 36.9288 29.8333 36.2573 29.8333 35.4288V32.0955C29.8333 27.5852 26.1769 23.9288 21.6666 23.9288H8.33329ZM31.881 25.2705C32.0881 24.4684 32.9063 23.986 33.7084 24.1931C37.3119 25.1236 39.8306 28.3727 39.8334 32.0944V32.0955V35.4288C39.8334 36.2573 39.1618 36.9288 38.3334 36.9288C37.5049 36.9288 36.8334 36.2573 36.8334 35.4288V32.0966V32.0963C36.8315 29.7419 35.2381 27.6865 32.9584 27.0979C32.1563 26.8908 31.6739 26.0726 31.881 25.2705ZM27.0387 4.19238C26.2361 3.9869 25.419 4.47091 25.2135 5.27345C25.008 6.07599 25.492 6.89315 26.2946 7.09863C28.5807 7.68398 30.1797 9.74395 30.1797 12.1038C30.1797 14.4637 28.5807 16.5237 26.2946 17.109C25.492 17.3145 25.008 18.1317 25.2135 18.9342C25.419 19.7368 26.2361 20.2208 27.0387 20.0153C30.6523 19.0901 33.1797 15.834 33.1797 12.1038C33.1797 8.3737 30.6523 5.1176 27.0387 4.19238ZM41.3115 25.2704C41.5187 24.4683 42.3368 23.986 43.1389 24.1931C46.7425 25.1235 49.2611 28.3726 49.2639 32.0943V32.0954V35.4288C49.2639 36.2572 48.5923 36.9288 47.7639 36.9288C46.9355 36.9288 46.2639 36.2572 46.2639 35.4288V32.0966V32.0963C46.262 29.7418 44.6686 27.6864 42.3889 27.0978C41.5868 26.8907 41.1044 26.0726 41.3115 25.2704ZM36.4696 4.19244C35.6671 3.98696 34.8499 4.47097 34.6444 5.27351C34.4389 6.07605 34.9229 6.89321 35.7255 7.09869C38.0116 7.68404 39.6106 9.74402 39.6106 12.1039C39.6106 14.4638 38.0116 16.5238 35.7255 17.1091C34.9229 17.3146 34.4389 18.1318 34.6444 18.9343C34.8499 19.7368 35.6671 20.2208 36.4696 20.0154C40.0832 19.0901 42.6106 15.834 42.6106 12.1039C42.6106 8.37376 40.0832 5.11767 36.4696 4.19244Z" fill-opacity="0.9" transform="scale(0.5) translate(130 130)"></path>		 
    			 <text x="70" y="130">
    				MEET
    				<tspan x="65" y="150"> THE CREATERS </tspan>
    			 </text>
    		  </g>
    	  <a></a>
    	  
    	  <a href="#" title="Cars that found homes" target="_self">
    		  <g class="icon">	     
    			 <image xlink:href="https://picsum.photos/200/300" x="0" y="0"></image>
    			 <path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z"></path>
    			 <!-- icon alarm -->   
    			 <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(390 130)"></path>
    			 <text x="200" y="130">
    				CARS THAT
    				<tspan x="195" y="150"> FOUND HOMES </tspan>
    			 </text>
    		  </g>
    	  </a>
    	  
    	  <a href="#" title="Check out the “a”list" target="_self">
    		  <g class="icon">
    			 <image xlink:href="https://picsum.photos/200/300"></image>
    			 <path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z"></path>
    			 <!-- icon favorite --> 
    			 <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20.7062 7.06419C22.7067 5.06288 25.4204 3.93848 28.2502 3.93848C31.08 3.93848 33.7939 5.06297 35.7944 7.06444C37.7956 9.06493 38.9199 11.7786 38.9199 14.6082C38.9199 17.4379 37.7955 20.1517 35.7942 22.1522C35.7941 22.1523 35.7943 22.1521 35.7942 22.1522L21.0608 36.8855C20.7795 37.1668 20.398 37.3249 20.0002 37.3249C19.6024 37.3249 19.2208 37.1668 18.9395 36.8855L4.20618 22.1522C0.0397515 17.9857 0.0397522 11.2306 4.20618 7.06419C8.37262 2.89776 15.1277 2.89776 19.2942 7.06419L20.0002 7.7702L20.7062 7.06419C20.7061 7.06428 20.7063 7.06411 20.7062 7.06419ZM28.2502 6.93848C26.2162 6.93848 24.2656 7.74671 22.8277 9.18526L21.0608 10.9522C20.7795 11.2335 20.398 11.3915 20.0002 11.3915C19.6024 11.3915 19.2208 11.2335 18.9395 10.9522L17.1728 9.18551C14.178 6.19065 9.32236 6.19065 6.3275 9.18551C3.33265 12.1804 3.33264 17.036 6.3275 20.0309L20.0002 33.7035L33.6728 20.0309C35.1114 18.593 35.9199 16.6421 35.9199 14.6082C35.9199 12.5742 35.1117 10.6236 33.6731 9.18576C32.2352 7.7472 30.2841 6.93848 28.2502 6.93848Z" fill-opacity="0.9" transform="scale(0.5) translate(660 130)"></path>
    			 <text x="330" y="130">
    				CHECK OUT
    				<tspan x="325" y="150"> THE `A` LIST </tspan>
    			 </text>
    		  </g>
    	  </a>
    	  
    	  <a href="#" title="Drive into the adventure" target="_self">
    		  <g class="icon">
    			 <image xlink:href="https://picsum.photos/200/300" x="0" y="0"></image>
    			 <path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"></path>
    			 <!-- icon map -->
    			 <path transform="translate(460 50)" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M13.3288 2.26972C13.0498 2.27054 12.7888 2.34752 12.5653 2.48096L0.922479 9.13402C0.455116 9.40108 0.166687 9.8981 0.166687 10.4364V37.1031C0.166687 37.6378 0.451325 38.132 0.913797 38.4004C1.37627 38.6688 1.94664 38.6707 2.4109 38.4054L13.3806 32.137L25.9681 38.4308C26.1767 38.5408 26.4144 38.6031 26.6667 38.6031C26.9474 38.6031 27.21 38.526 27.4347 38.3918L39.0776 31.7387C39.5449 31.4717 39.8334 30.9747 39.8334 30.4364V3.76971C39.8334 3.23501 39.5487 2.74073 39.0862 2.47235C38.6238 2.20397 38.0534 2.20206 37.5891 2.46735L26.6195 8.73573L14.0304 2.44117C13.8256 2.3335 13.5929 2.2718 13.3459 2.26977L13.3333 2.26971L13.3288 2.26972ZM28.1667 34.5183L36.8334 29.5659V6.35448L28.1667 11.3069V34.5183ZM25.1667 11.3634L14.8333 6.19675V29.5093L25.1667 34.676V11.3634ZM3.16669 11.3069L11.8333 6.35451V29.5659L3.16669 34.5183V11.3069Z" fill-opacity="0.9"></path>
    			 <path d="M0 0h24v24H0z" fill="none"></path>
    			 <text x="470" y="130">
    				DRIVE INTO
    				<tspan x="465" y="150"> THE ADVENTURE </tspan>
    			 </text>
    		  </g>
    	  </a>
    	  
    	  <a href="#" title="Get in touch with us" target="_self">
    		  <g class="icon">
    			 <path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z"></path>
    			 <!-- chat --> 
    			 <path transform="translate(585 50)" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M20.8294 6.9467C18.8659 6.94158 16.9289 7.40033 15.1763 8.2856L15.1706 8.28847C10.8798 10.4329 8.16852 14.8171 8.16667 19.614L8.16666 19.6173C8.16154 21.5808 8.6203 23.5178 9.50557 25.2704C9.68588 25.6274 9.71617 26.0416 9.58969 26.421L7.37171 33.075L14.0257 30.857C14.4051 30.7305 14.8193 30.7608 15.1763 30.9411C16.9289 31.8264 18.8659 32.2852 20.8294 32.28L20.8328 32.28C25.6296 32.2782 30.0138 29.5669 32.1582 25.2761L32.1611 25.2704C33.0464 23.5178 33.5051 21.5808 33.5 19.6173L33.5 19.6134V18.8225C33.1269 12.4251 28.0216 7.31974 21.6242 6.9467H20.8333L20.8294 6.9467ZM36.5 19.611C36.5061 22.0455 35.9374 24.447 34.8403 26.6203C32.1877 31.9249 26.7671 35.2769 20.8362 35.28L20.8339 35.28L20.8372 35.28L20.8362 35.28C18.6135 35.2857 16.4182 34.8122 14.3991 33.8948C10.9138 35.0566 5.47434 36.8697 5.47434 36.8697C4.93534 37.0494 4.34109 36.9091 3.93934 36.5074C3.53759 36.1056 3.39731 35.5114 3.57698 34.9724L6.55189 26.0476C5.63459 24.0287 5.16111 21.8336 5.16667 19.6111L5.16667 19.6128L5.16667 19.6095L5.16667 19.6111C5.16959 13.6799 8.52173 8.25896 13.8266 5.60635L13.8237 5.60781L13.8294 5.60495L13.8266 5.60635C15.9997 4.50931 18.401 3.94067 20.8352 3.9467H21.6667C21.6942 3.9467 21.7218 3.94746 21.7493 3.94898C29.7057 4.38793 36.0588 10.741 36.4977 18.6974C36.4992 18.7249 36.5 18.7525 36.5 18.78V19.611Z" fill-opacity="0.9"></path>
    			 <text x="605" y="130">
    				GET IN TOUCH
    				<tspan x="605" y="150"> WITH US </tspan>
    			 </text>
    		  </g>
    	  </a>
       </a></svg>
    </div>

Answer 1

Я бы использовал только один путь: #thePath, и я бы <use> этот путь столько раз, сколько требуется.Эту группу можно перевести на нужную позицию.Изображение остается под элементом <use> и меняет значение fill-opacity с единицы на 0,7 (например)

. Также Y будет использовать #thePath для элемента <clipPath>.Изображение будет обрезано элементом <clipPath>: style="clip-path:url(#clip2)"

Замечание: для текста, который я использую pointer-events:none;.Таким образом, .overlay останется полупрозрачным, когда я наведусь на текст

.overlay {
  fill-opacity: 1;
  transition: 0.5s;
}

.overlay:hover {
  fill-opacity: 0.7;
}

svg {
  border: 1px solid;
}

.oblique-block text {
  font-size: 14px;
  font-weight: bold;
  fill: white;
  text-anchor: middle;
  pointer-events:none;
}

<div class="oblique-block">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
         
         <defs>
           <clipPath id="clip2">
             <path id="thePath" d="M30,3h135l-30,200h-135z"></path>
           </clipPath>
         </defs>
         

    	  
    	  
    		  <g class="icon" transform="translate(120)">	
          <a href="#" title="Cars that found homes" target="_self">
    			 <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip2)" ></image>
    			 <use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
    			 <!-- icon alarm -->   
    			 <path fill="white" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
    			 <text x="80" y="130">
    				CARS THAT
    				<tspan x="75" y="150"> FOUND HOMES </tspan>
    			 </text>
           </a>
    		  </g>
    	  
   </svg>
</div>

А вот пример, где я использую одну и ту же структуру 3 раза с разными значениями преобразования преобразования и разным цветом заливки:

.overlay {
  fill-opacity: 1;
  transition: 0.5s;
}

.overlay:hover {
  fill-opacity: 0.7;
}

svg {
  border: 1px solid;
}

.oblique-block text {
  font-size: 14px;
  font-weight: bold;
  fill: white;
  text-anchor: middle;
  pointer-events:none;
}

<div class="oblique-block">
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
      <defs>
         <clipPath id="clip1">
            <path id="thePathFirst" d="M 5,3 H 150 L 120,203 H 5 Z"></path>
         </clipPath>       
         <clipPath id="clip2">
            <path id="thePath" d="M30,3h135l-30,200h-135z"></path>
         </clipPath>                 
         <clipPath id="clip3">
            <path id="thePathLast" d="M30,3h135v200h-165z"></path>
         </clipPath>          
      </defs>
      <g class="icon"  transform="translate(0)">
         <a href="#" title="Cars that found homes" target="_self">  
           <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip1)" ></image>
            <use xlink:href="#thePathFirst" class="overlay" fill="#65C6CC" />
            <!-- icon alarm -->   
            <path fill="white" d="M15 3.92883C10.4897 3.92883 6.83337 7.58517 6.83337 12.0955C6.83337 16.6058 10.4897 20.2622 15 20.2622C19.5104 20.2622 23.1667 16.6058 23.1667 12.0955C23.1667 7.58517 19.5104 3.92883 15 3.92883ZM9.83337 12.0955C9.83337 9.24203 12.1466 6.92883 15 6.92883C17.8535 6.92883 20.1667 9.24203 20.1667 12.0955C20.1667 14.949 17.8535 17.2622 15 17.2622C12.1466 17.2622 9.83337 14.949 9.83337 12.0955ZM8.33329 23.9288C3.82297 23.9288 0.166626 27.5852 0.166626 32.0955V35.4288C0.166626 36.2573 0.838199 36.9288 1.66663 36.9288C2.49505 36.9288 3.16663 36.2573 3.16663 35.4288V32.0955C3.16663 29.242 5.47982 26.9288 8.33329 26.9288H21.6666C24.5201 26.9288 26.8333 29.242 26.8333 32.0955V35.4288C26.8333 36.2573 27.5049 36.9288 28.3333 36.9288C29.1617 36.9288 29.8333 36.2573 29.8333 35.4288V32.0955C29.8333 27.5852 26.1769 23.9288 21.6666 23.9288H8.33329ZM31.881 25.2705C32.0881 24.4684 32.9063 23.986 33.7084 24.1931C37.3119 25.1236 39.8306 28.3727 39.8334 32.0944V32.0955V35.4288C39.8334 36.2573 39.1618 36.9288 38.3334 36.9288C37.5049 36.9288 36.8334 36.2573 36.8334 35.4288V32.0966V32.0963C36.8315 29.7419 35.2381 27.6865 32.9584 27.0979C32.1563 26.8908 31.6739 26.0726 31.881 25.2705ZM27.0387 4.19238C26.2361 3.9869 25.419 4.47091 25.2135 5.27345C25.008 6.07599 25.492 6.89315 26.2946 7.09863C28.5807 7.68398 30.1797 9.74395 30.1797 12.1038C30.1797 14.4637 28.5807 16.5237 26.2946 17.109C25.492 17.3145 25.008 18.1317 25.2135 18.9342C25.419 19.7368 26.2361 20.2208 27.0387 20.0153C30.6523 19.0901 33.1797 15.834 33.1797 12.1038C33.1797 8.3737 30.6523 5.1176 27.0387 4.19238ZM41.3115 25.2704C41.5187 24.4683 42.3368 23.986 43.1389 24.1931C46.7425 25.1235 49.2611 28.3726 49.2639 32.0943V32.0954V35.4288C49.2639 36.2572 48.5923 36.9288 47.7639 36.9288C46.9355 36.9288 46.2639 36.2572 46.2639 35.4288V32.0966V32.0963C46.262 29.7418 44.6686 27.6864 42.3889 27.0978C41.5868 26.8907 41.1044 26.0726 41.3115 25.2704ZM36.4696 4.19244C35.6671 3.98696 34.8499 4.47097 34.6444 5.27351C34.4389 6.07605 34.9229 6.89321 35.7255 7.09869C38.0116 7.68404 39.6106 9.74402 39.6106 12.1039C39.6106 14.4638 38.0116 16.5238 35.7255 17.1091C34.9229 17.3146 34.4389 18.1318 34.6444 18.9343C34.8499 19.7368 35.6671 20.2208 36.4696 20.0154C40.0832 19.0901 42.6106 15.834 42.6106 12.1039C42.6106 8.37376 40.0832 5.11767 36.4696 4.19244Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
            <text x="80" y="130">
               CARS THAT
               <tspan x="75" y="150"> FOUND HOMES </tspan>
            </text>
         </a>
      </g>
      <g class="icon" transform="translate(120)">
         <a href="#" title="Cars that found homes" target="_self">
            <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip2)" ></image>
            <use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
            <!-- icon alarm -->   
            <path fill="white" d="M20 2.25958C9.96681 2.25958 1.83331 10.3931 1.83331 20.4263C1.83331 30.4594 9.96681 38.5929 20 38.5929C30.0332 38.5929 38.1666 30.4594 38.1666 20.4263C38.1666 10.3931 30.0332 2.25958 20 2.25958ZM4.83331 20.4263C4.83331 12.0499 11.6237 5.25958 20 5.25958C28.3763 5.25958 35.1666 12.0499 35.1666 20.4263C35.1666 28.8026 28.3763 35.5929 20 35.5929C11.6237 35.5929 4.83331 28.8026 4.83331 20.4263ZM21.5 10.4263C21.5 9.59784 20.8284 8.92627 20 8.92627C19.1716 8.92627 18.5 9.59784 18.5 10.4263V20.4263C18.5 20.8241 18.658 21.2056 18.9393 21.4869L23.9393 26.4869C24.5251 27.0727 25.4749 27.0727 26.0607 26.4869C26.6464 25.9011 26.6464 24.9514 26.0607 24.3656L21.5 19.8049V10.4263Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
            <text x="80" y="130">
               CARS THAT
               <tspan x="75" y="150"> FOUND HOMES </tspan>
            </text>
         </a>
      </g>
      <g class="icon" transform="translate(255)">
         <a href="#" title="Cars that found homes" target="_self">
            <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip2)" ></image>
            <use class="overlay" xlink:href="#thePath" fill="#65C6CC" fill-opacity="1" />
            <!-- icon alarm -->   
            <path fill="white" d="M20.7062 7.06419C22.7067 5.06288 25.4204 3.93848 28.2502 3.93848C31.08 3.93848 33.7939 5.06297 35.7944 7.06444C37.7956 9.06493 38.9199 11.7786 38.9199 14.6082C38.9199 17.4379 37.7955 20.1517 35.7942 22.1522C35.7941 22.1523 35.7943 22.1521 35.7942 22.1522L21.0608 36.8855C20.7795 37.1668 20.398 37.3249 20.0002 37.3249C19.6024 37.3249 19.2208 37.1668 18.9395 36.8855L4.20618 22.1522C0.0397515 17.9857 0.0397522 11.2306 4.20618 7.06419C8.37262 2.89776 15.1277 2.89776 19.2942 7.06419L20.0002 7.7702L20.7062 7.06419C20.7061 7.06428 20.7063 7.06411 20.7062 7.06419ZM28.2502 6.93848C26.2162 6.93848 24.2656 7.74671 22.8277 9.18526L21.0608 10.9522C20.7795 11.2335 20.398 11.3915 20.0002 11.3915C19.6024 11.3915 19.2208 11.2335 18.9395 10.9522L17.1728 9.18551C14.178 6.19065 9.32236 6.19065 6.3275 9.18551C3.33265 12.1804 3.33264 17.036 6.3275 20.0309L20.0002 33.7035L33.6728 20.0309C35.1114 18.593 35.9199 16.6421 35.9199 14.6082C35.9199 12.5742 35.1117 10.6236 33.6731 9.18576C32.2352 7.7472 30.2841 6.93848 28.2502 6.93848Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
            <text x="80" y="130">
               CARS THAT
               <tspan x="75" y="150"> FOUND HOMES </tspan>
            </text>
         </a>
      </g>
      <g class="icon" transform="translate(390)">
         <a href="#" title="Cars that found homes" target="_self">
            <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip2)" ></image>
            <use class="overlay" xlink:href="#thePath" fill="#E0AD51" fill-opacity="1" />
            <!-- icon alarm -->   
            <path fill="white" d="M13.3288 2.26972C13.0498 2.27054 12.7888 2.34752 12.5653 2.48096L0.922479 9.13402C0.455116 9.40108 0.166687 9.8981 0.166687 10.4364V37.1031C0.166687 37.6378 0.451325 38.132 0.913797 38.4004C1.37627 38.6688 1.94664 38.6707 2.4109 38.4054L13.3806 32.137L25.9681 38.4308C26.1767 38.5408 26.4144 38.6031 26.6667 38.6031C26.9474 38.6031 27.21 38.526 27.4347 38.3918L39.0776 31.7387C39.5449 31.4717 39.8334 30.9747 39.8334 30.4364V3.76971C39.8334 3.23501 39.5487 2.74073 39.0862 2.47235C38.6238 2.20397 38.0534 2.20206 37.5891 2.46735L26.6195 8.73573L14.0304 2.44117C13.8256 2.3335 13.5929 2.2718 13.3459 2.26977L13.3333 2.26971L13.3288 2.26972ZM28.1667 34.5183L36.8334 29.5659V6.35448L28.1667 11.3069V34.5183ZM25.1667 11.3634L14.8333 6.19675V29.5093L25.1667 34.676V11.3634ZM3.16669 11.3069L11.8333 6.35451V29.5659L3.16669 34.5183V11.3069Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
            <text x="80" y="130">
               CARS THAT
               <tspan x="75" y="150"> FOUND HOMES </tspan>
            </text>
         </a>
      </g>
      <g class="icon" transform="translate(525)">
         <a href="#" title="Cars that found homes" target="_self">
           <image xlink:href="https://picsum.photos/200/300" width="200" x="-16" height="250"   style="clip-path:url(#clip3)" ></image>
            <use xlink:href="#thePathLast" class="overlay" fill="#65C6CC" />
            <!-- icon alarm -->   
            <path fill="white" d="M20.8294 6.9467C18.8659 6.94158 16.9289 7.40033 15.1763 8.2856L15.1706 8.28847C10.8798 10.4329 8.16852 14.8171 8.16667 19.614L8.16666 19.6173C8.16154 21.5808 8.6203 23.5178 9.50557 25.2704C9.68588 25.6274 9.71617 26.0416 9.58969 26.421L7.37171 33.075L14.0257 30.857C14.4051 30.7305 14.8193 30.7608 15.1763 30.9411C16.9289 31.8264 18.8659 32.2852 20.8294 32.28L20.8328 32.28C25.6296 32.2782 30.0138 29.5669 32.1582 25.2761L32.1611 25.2704C33.0464 23.5178 33.5051 21.5808 33.5 19.6173L33.5 19.6134V18.8225C33.1269 12.4251 28.0216 7.31974 21.6242 6.9467H20.8333L20.8294 6.9467ZM36.5 19.611C36.5061 22.0455 35.9374 24.447 34.8403 26.6203C32.1877 31.9249 26.7671 35.2769 20.8362 35.28L20.8339 35.28L20.8372 35.28L20.8362 35.28C18.6135 35.2857 16.4182 34.8122 14.3991 33.8948C10.9138 35.0566 5.47434 36.8697 5.47434 36.8697C4.93534 37.0494 4.34109 36.9091 3.93934 36.5074C3.53759 36.1056 3.39731 35.5114 3.57698 34.9724L6.55189 26.0476C5.63459 24.0287 5.16111 21.8336 5.16667 19.6111L5.16667 19.6128L5.16667 19.6095L5.16667 19.6111C5.16959 13.6799 8.52173 8.25896 13.8266 5.60635L13.8237 5.60781L13.8294 5.60495L13.8266 5.60635C15.9997 4.50931 18.401 3.94067 20.8352 3.9467H21.6667C21.6942 3.9467 21.7218 3.94746 21.7493 3.94898C29.7057 4.38793 36.0588 10.741 36.4977 18.6974C36.4992 18.7249 36.5 18.7525 36.5 18.78V19.611Z" fill-opacity="0.9" transform="scale(0.5) translate(150 130)"></path>
            <text x="80" y="130">
               CARS THAT
               <tspan x="75" y="150"> FOUND HOMES </tspan>
            </text>
         </a>
      </g>
       
   </svg>
</div>