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

【问题标题】：Smooth transition on svg hover path fill CSSsvg悬停路径填充CSS上的平滑过渡
【发布时间】：2024-05-29 17:15:02
【问题描述】：

您好，我有一个 svg，悬停时填充会更改为 svg 代码中定义的渐变。

我想使用平滑的 css 过渡，颜色会发生变化，但我无法使过渡正常工作。

有什么想法吗？

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

【问题讨论】：

标签： html css svg

【解决方案1】：

我建议您使用另一条路径并将其重叠，然后使用不透明度。不知道这是否是您想要的，但希望对您有所帮助..

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>

您还可以在 codepen 上看到它的实际效果。

【讨论】：