svg图标与背景重叠 [英] The svg icon is overlapped with backround

问题描述

我有一个工作的偏斜div块，其下面带有图标和文本.首先使用jpeg图标.但是应该将它们与svg交换.此外，图标和文本应始终居中.这是旧版本无法实现的.

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.

我已经将图标替换为SVG，更改了标记和css，但是这些图标没有显示.似乎它们与背景重叠.此外，还发现了一些小问题:文本无法设置格式和居中. svg不会更改hover上的颜色.

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.

这是 JSFiddle ，其中svg 已更新

这就是我要实现的目标:

And here is what I'm trying to achieve:

推荐答案

为实现适应性，网站标题的所有元素:部分，图标，文本的形式都放置在SVG内

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>	 

• 将代码添加到图标
• 添加了文本，并使用命令将其与部分的中心对齐 text-anchor="middle"
• 使用规则CSS
突出显示图标和文本

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

这篇关于svg图标与背景重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！