Change svg gradient to solid white with a transition? - html

Question

I can't seem to get a transition on an SVG when I hover it.
The svg has a gradient inside ... but I want it to transition to white on hover.
Any ideas?
svg {
width: 20px;
height: 20px;
path {
transition: fill 0.4s ease;
&:hover {
fill: $white;
}
}
}
<svg id="Facebook_icon" data-name="Facebook icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.713" height="16.779" viewBox="0 0 8.713 16.779">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f7d077"/>
<stop offset="0.112" stop-color="#ffefaa"/>
<stop offset="0.269" stop-color="#ffdb74"/>
<stop offset="0.552" stop-color="#dba846"/>
<stop offset="0.808" stop-color="#dba846"/>
<stop offset="1" stop-color="#f4cd6f"/>
</linearGradient>
</defs>
<path id="Icon" d="M8.713,2.785H7.134c-1.238,0-1.479.588-1.479,1.451v1.9H8.61L8.225,9.125H5.655v7.653H2.576V9.125H0V6.142H2.576v-2.2A3.594,3.594,0,0,1,6.412,0a21.049,21.049,0,0,1,2.3.117Z" fill="url(#linear-gradient)"/>
</svg>

Answer 1

For CSSOM, a gradient is of type <image>, and you can't transition from an <image> to a solid <color>.
What you can do however is to transition from an <image> to an other <image>, so we should have been able to transition between two gradients, but as of this writing it seems no browser supports transitioning between svg gradients and none supports CSS gradients as fill value.
What does work however is to transition the stop-color values of the <stop> elements.
For this to happen only when the <path> is hovered, I did change the structure of your svg.
svg {
width: 20px;
height: 20px;
}
svg stop {
transition: stop-color 0.4s ease;
}
svg path:hover ~ defs stop {
stop-color: white;
}
<svg id="Facebook_icon" data-name="Facebook icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.713" height="16.779" viewBox="0 0 8.713 16.779">
<path id="Icon" d="M8.713,2.785H7.134c-1.238,0-1.479.588-1.479,1.451v1.9H8.61L8.225,9.125H5.655v7.653H2.576V9.125H0V6.142H2.576v-2.2A3.594,3.594,0,0,1,6.412,0a21.049,21.049,0,0,1,2.3.117Z"
fill="url(#linear-gradient)"/>
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f7d077"/>
<stop offset="0.112" stop-color="#ffefaa"/>
<stop offset="0.269" stop-color="#ffdb74"/>
<stop offset="0.552" stop-color="#dba846"/>
<stop offset="0.808" stop-color="#dba846"/>
<stop offset="1" stop-color="#f4cd6f"/>
</linearGradient>
</defs>
</svg>