The svg icon is overlapped with backround

问题

I've a working skewed div block with icons and text underneath of it. Firstly the jpeg icons were used. But they should be swapped with svg. Also, icons and text should be always centered. This wasn't achieved with old revision.

I've swapped the icons with SVG, changed the markup and css, but the icons don't show up. It seems, that they are overlapped by background. Additionally, some minor problems revealed: text can't be formatted and centered. svg doesn't change the color on hover.

here is a JSFiddle with svg updated

And here is what I'm trying to achieve:

回答1:

To implement adaptability, all elements of the site header: the form of sections, icons, text are placed inside the SVG

The form of sections is drawn in the vector editor.

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

Add code to icons
Added text and align it to the center of the section with the command text-anchor="middle"
Highlighting the icon and text is implemented using the rules 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>

来源：https://stackoverflow.com/questions/56856184/the-svg-icon-is-overlapped-with-backround

标签

html

css

svg

markup