Значок SVG перекрывается с фоном

Question

У меня есть рабочий перекошенный блок div с иконками и текстом под ним.Сначала использовались значки jpeg.Но они должны поменяться местами с svg.Кроме того, значки и текст должны быть всегда в центре.Это не было достигнуто со старой ревизией.

Я поменял значки на SVG, изменил разметку и css, но значки не отображаются.Кажется, что они перекрываются фоном.Кроме того, обнаружены некоторые незначительные проблемы: текст не может быть отформатирован и отцентрирован.svg не меняет цвет на hover.

здесь JSFiddle с svg обновлено

И вот что япытаюсь добиться:

Answer 1

Для реализации адаптивности все элементы заголовка сайта: форма разделов, иконки, текст размещены внутри SVG

Форма секций рисуется в векторном редакторе.

<div class="header">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="50%" height="50%" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet"  >  

  <path id="p1" fill="#65C6CC"  d="M 5,3 H 150 L 120,203 H 5 Z" />  
   <path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" /> 
    <path  id="p3" fill="#329FA4"  d="M 285,3 H 425 L 390,203 H 255 Z" />  
     <path id="p4" fill="#E0AD51"  d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>  
	  <path  id="p5" fill="#65C6CC"  d="M 560,3 H 670 V 203 H 525 Z" /> 
	 </svg> 
</div>	 

• Добавить код в иконки
• Добавлен текст и выровняйте его по центру раздела командой text-anchor="middle"
• Подсветка значка и текста реализована с использованием правил CSS

.header {
 width:100%;
 height:100%;
 
 }
  svg text {
  font-size:14px;
  font-weight:bold;
  fill:white;
  text-anchor:middle;
  }
  :hover.icon {
   fill:greenyellow;
   stroke:greenyellow;
     }

<div class="header">
<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"  >  
<g class="icon">
	   <path id="p1" fill="#65C6CC"  d="M 5,3 H 150 L 120,203 H 5 Z" />  
	 <!-- icon supervisor --> 
   <path class="icon" transform="translate(50 50)" fill="white"  d="M33 24c2.76 0 4.98-2.24 4.98-5s-2.22-5-4.98-5c-2.76 0-5 2.24-5 5s2.24 5 5 5zm-15-2c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm15 6c-3.67 0-11 1.84-11 5.5V38h22v-4.5c0-3.66-7.33-5.5-11-5.5zm-15-2c-4.67 0-14 2.34-14 7v5h14v-4.5c0-1.7.67-4.67 4.74-6.94C21 26.19 19.31 26 18 26z"/>	 
   <text x="70" y="130" > MEET
    <tspan x="65" y="150"> THE CREATERS </tspan>
   </text>    
</g>	 
 <g class="icon">
   <path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" /> 
      <!-- icon alarm -->   
	  <path transform="translate(180 50)" fill="white"  d="M44 11.44l-9.19-7.71-2.57 3.06 9.19 7.71L44 11.44zM15.76 6.78l-2.57-3.06L4 11.43l2.57 3.06 9.19-7.71zM25 16h-3v12l9.49 5.71L33 31.24l-8-4.74V16zm-1.01-8C14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26 33.94 8 23.99 8zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.26 14-14 14z"/> 
	<text x="200" y="130" > CARS THAT
    <tspan x="195" y="150"> FOUND HOMES </tspan>
   </text>      
  </g>	  
<g class="icon">  
<path  id="p3" fill="#329FA4"  d="M 285,3 H 425 L 390,203 H 255 Z" />  
     <!-- icon favorite --> 
   <path  transform="translate(310 50)" fill="white" d="M33 6c-3.48 0-6.82 1.62-9 4.17C21.82 7.62 18.48 6 15 6 8.83 6 4 10.83 4 17c0 7.55 6.8 13.72 17.1 23.07L24 42.7l2.9-2.63C37.2 30.72 44 24.55 44 17c0-6.17-4.83-11-11-11zm-8.79 31.11l-.21.19-.21-.19C14.28 28.48 8 22.78 8 17c0-3.99 3.01-7 7-7 3.08 0 6.08 1.99 7.13 4.72h3.73C26.92 11.99 29.92 10 33 10c3.99 0 7 3.01 7 7 0 5.78-6.28 11.48-15.79 20.11z"/> 
     <text x="330" y="130" > CHECK OUT
    <tspan x="325" y="150"> THE `A` LIST </tspan>
   </text> 
  </g> 
<g class="icon">	   
<path id="p4" fill="#E0AD51"  d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>  
     <!-- icon map -->
   <path  transform=" scale(2) translate(230 25)" fill="white" d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/><path d="M0 0h24v24H0z" fill="none"/>
	<text x="470" y="130" > DRIVE INTO
    <tspan x="465" y="150"> THE ADVENTURE </tspan>
   </text>  
</g>	
<g class="icon"> 
 <path  id="p5" fill="#65C6CC"  d="M 560,3 H 670 V 203 H 525 Z" /> 
       <!-- chat --> 
    <path  transform="translate(585 50)" fill="white" d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zm-4 24H12v-4h24v4zm0-6H12v-4h24v4zm0-6H12v-4h24v4z"/> 
	  <text x="605" y="130" > GET IN TOUCH
       <tspan x="605" y="150"> WITH US </tspan>
      </text> 
</g>	
	 </svg> 
</div>