On hover change SVG from colour to gradient with a transition - HTML CSS SVG

HTML CSS examples for SVG:lineargradient

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

Description

On hover change SVG from colour to gradient with a transition

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

#clock-gradient {<!--  www  . j  a va  2s .  co  m-->
   opacity: 0.0;
   display: inline-block;
   -webkit-transition: opacity .4s ease;
   -moz-transition: opacity .4s ease;
   -o-transition: opacity .4s ease;
   transition: opacity .4s ease;
}
#clock-gradient:hover {
   opacity: 1.0;
}


      </style> 
 </head> 
 <body> 
  <svg width="96px" height="96px" viewbox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <defs> 
    <lineargradient id="gradient" gradientunits="userSpaceOnUse" fy="90%"> 
     <stop offset="0" style="stop-color:#1EBEE0" /> 
     <stop offset="1" style="stop-color:#952491" /> 
    </lineargradient> 
    <mask id="clock-icon-mask" maskunits="userSpaceOnUse" x="0" y="0" width="512" height="512"> 
     <path d="M256,50C142.2,50,50,142.229,50,256c0,113.77,92.229,206,206,2c113.77,0,206-92.23,206-206C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z" fill="white" /> 
    </mask> 
   </defs> 
   <g mask="url(#clock-icon-mask)"> 
    <rect x="0" y="0" width="512" height="512" fill="blue" /> 
    <rect id="clock-gradient" x="0" y="0" width="512" height="512" fill="url(#gradient)" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials