Question

您好我有一个svg，并将填充更改悬停在svg代码中定义的渐变。

我想使用平滑的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

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

svg悬停路径上的平滑过渡填充CSS

1 个答案: