CODEWITHSUNDEEP
htmlcsssvg
cup_of
cup_of

Reputation: 6687

Smooth transition on svg hover path fill CSS

Hello I have an svg and on hover the fill changes to a defined gradient in the svg code.

I would like to use a smooth css transition, the color changes but I cant get the transition to work.

Any ideas?

svg {
  height: 300px;
  width: auto;
}

svg  path {
  fill: #000;
  transition: all .25s ease-in-out;
}

svg:hover path {
  fill: url(#gradient);
}
<svg version="1.1" 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 43.086 88.794" enable-background="new 0 0 43.086 88.794" xml:space="preserve">
     <defs>
         <linearGradient id="gradient">
           <stop offset="0" stop-color="#a1c733" />
           <stop offset="1" stop-color="#4fb208" />
         </linearGradient>
       </defs>
<path id="Facebook_1_" fill="#000" d="M9.313,17.883c0,2.326,0,12.711,0,12.711H0v15.545h9.313v42.655h19.131V46.139H41.28
    c0,0,1.203-7.453,1.784-15.603c-1.671,0-14.548,0-14.548,0s0-9.043,0-10.627c0-1.588,2.085-3.726,4.147-3.726
    c2.058,0,6.401,0,10.423,0c0-2.117,0-9.429,0-16.183c-5.37,0-11.479,0-14.171,0C8.84,0,9.313,15.56,9.313,17.883z"/>
</svg>

JSfiddle

Upvotes: 1

Views: 3404

Answers (1)

Fered
Fered

Reputation: 908

I would suggest you to use another path and overlap it and then use opacity.. Don't know if it will be what you want but hope it helps..

svg {
  height: 300px;
  width: auto;
}

svg path#Facebook_1_hover{opacity:0;transition:opacity ease-in .2s}
svg:hover path#Facebook_1_hover{opacity:1}
<svg version="1.1" 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 43.086 88.794" enable-background="new 0 0 43.086 88.794" xml:space="preserve">
     <defs> 
         <linearGradient id="gradient">
           <stop offset="0" stop-color="#a1c733" />
           <stop offset="1" stop-color="#4fb208" /> 
         </linearGradient> 
       </defs>
<path id="Facebook_1_" fill="#000" d="M9.313,17.883c0,2.326,0,12.711,0,12.711H0v15.545h9.313v42.655h19.131V46.139H41.28
    c0,0,1.203-7.453,1.784-15.603c-1.671,0-14.548,0-14.548,0s0-9.043,0-10.627c0-1.588,2.085-3.726,4.147-3.726
    c2.058,0,6.401,0,10.423,0c0-2.117,0-9.429,0-16.183c-5.37,0-11.479,0-14.171,0C8.84,0,9.313,15.56,9.313,17.883z"/>
  <path id="Facebook_1_hover" fill="url(#gradient)" d="M9.313,17.883c0,2.326,0,12.711,0,12.711H0v15.545h9.313v42.655h19.131V46.139H41.28
    c0,0,1.203-7.453,1.784-15.603c-1.671,0-14.548,0-14.548,0s0-9.043,0-10.627c0-1.588,2.085-3.726,4.147-3.726
    c2.058,0,6.401,0,10.423,0c0-2.117,0-9.429,0-16.183c-5.37,0-11.479,0-14.171,0C8.84,0,9.313,15.56,9.313,17.883z"/>
</svg>

You can also see it in action on codepen.

Upvotes: 2

Related Questions