Smooth transition on svg hover path fill CSS

Question

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

Answer 1

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 .