svg懸停路徑填充平滑過渡CSS

你好，我有一個svg，並將填充更改懸停在svg代碼中定義的漸變。svg懸停路徑填充平滑過渡CSS

我想使用平滑的css過渡，顏色會發生變化，但我不能轉換到工作狀態。

任何想法？

HTML SVG代碼：

<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

來源

2017-06-30 cup_of

我會建議你使用另一條路徑，並重疊，然後使用不透明。不知道如果它會是你想要的但希望它有幫助..

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

來源

2017-06-30 22:13:17 Fered

svg懸停路徑填充平滑過渡CSS

回答

相關問題