svgのホバーパスの塗りつぶしにスムーズに移行CSS

Question

こんにちは私はsvgを持っています。

私はスムーズなCSSトランジションを使用したいと思いますが、色は変わりますが、私はトランジションを働かせません。

アイデア？

HTML SVGのCODE：

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

CSS：

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

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

svg:hover path { 
    fill: url(#gradient); 
} 

JSfiddle

Answer 1

私は別のパスを使用し、それに重なるように、あなたを提案して、不透明度を使用します。..知ってはいけませんもしあなたが望むものなら、それが助けてくれることを望みます。

CSS：

svg path#Facebook_1_hover{opacity:0;transition:opacity ease-in .2s} 
svg:hover path#Facebook_1_hover{opacity:1} 

HTML：

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

また、ここでは、アクション https://codepen.io/FaridNaderi/pen/BZryKo

でそれを見ることができます