1

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:

enter image description here

Kuzma
  • 679
  • 1
  • 12
  • 36
  • 1
    here is an idea with less of code: https://stackoverflow.com/a/49289555/8620333 ... it should be easier since you don't have background, or use the icons as background – Temani Afif Jul 02 '19 at 15:58
  • 1
    You wrap the `` elements in a `` element. Please change this. It's an error – enxaneta Jul 02 '19 at 16:37
  • As I understand, the `` should be wrapped in `g` tag. So, it should be done in such a way? `
    xxx
    `     – Kuzma Jul 02 '19 at 17:47

1 Answers1

3

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>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
  • 1
    That's awesome! Thank you! – Kuzma Jul 03 '19 at 08:33
  • Tell me please, how to control the icon `path` size? I need to set icons sizes: `width="50" height="41` – Kuzma Jul 03 '19 at 09:47
  • 1
    Select the values of the scale () and position the icons translate (X Y) – Alexandr_TT Jul 03 '19 at 10:00
  • ahh.. could you please help with the last issue, I'm unable to reveal an image on hover, as I did it here `https://jsfiddle.net/b2v3nrt8/` And here is the problem: `https://jsfiddle.net/voftax5q/` I've changed the `img` into `image` tag. But it seems that another technique should be used – Kuzma Jul 03 '19 at 11:12
  • 1
    @Kuzma I could not find the reason for the refusal. Since my hobby is svg, but not `CSS` And what you are not satisfied with my decision? After all, it is completely finished and can be embedded anywhere in your HTML page as a separate block. If you have replaced something and the application is not working, then you can ask a new question. There are a lot of CSS and SVG professionals here and they will definitely find the reason for the rejection. – Alexandr_TT Jul 03 '19 at 11:41
  • 1
    No, no, I'm not refusing. I've accepted your answer and it's brilliant! I just want to slightly change the `markup` and `css` in order to make a hover effect work... It's not a problem, I will ask a new question. You have solved my initial problem ;) – Kuzma Jul 03 '19 at 12:03