Make svg icon color on hover - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

Make svg icon color on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body{<!--from   w w  w  .ja v  a2s .c om-->
   background: #003F62;
}
.search-social {
   width: 18px;
   height: 18px;
   cursor: pointer;
}
#Layer_1:hover .search-icon {
   fill: red; stroke:red;
}


      </style> 
 </head> 
 <body> 
  <div class="search-social"> 
   <svg version="1.2" baseprofile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 18 18" overflow="scroll" xml:space="preserve"> 
    <g id="mag"> 
     <path fill="none" d="M3.8,3.8C2.9,4.6,2.5,5.8,2.5,7c0,1.2,0.5,2.3,1.3,3.2c1.8,1.8,4.6,1.7,6.4,0c0.8-0.9,1.3-2,1.3-3.2
c0-1.2-0.5-2.3-1.3-3.2c-0.9-0.8-2-1.3-3.2-1.3C5.7,2.5,4.6,2.9,3.8,3.8z" /> 
     <path class="search-icon" fill="white" d="M2,2.1C0.7,3.4,0,5.1,0,7c0,1.9,0.7,3.6,2,4.9c2.7,2.7,7.1,2.7,9.8,0c1.3-1.3,2-3.1,2-4.9
c0-1.9-0.7-3.6-2-4.9c-1.3-1.3-3.1-2-4.9-2h0C5.1,0,3.3,0.7,2,2.1z M11.5,6.9c0,1.2-0.5,2.3-1.3,3.2c-1.8,1.8-4.6,1.8-6.4,0
C2.9,9.3,2.5,8.2,2.5,7c0-1.2,0.5-2.3,1.3-3.2c0.8-0.9,2-1.3,3.2-1.3c1.2,0,2.3,0.5,3.2,1.3C11,4.6,11.5,5.7,11.5,6.9z" /> 
     <rect class="search-icon" x="12.7" y="10" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.8387 14.095)" fill="white" width="2.9" height="8.2" /> 
    </g> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials