改变svg渐变为纯白色与过渡?

Question

当我将SVG悬停时，它似乎无法获得过渡。svg有一个渐变里面…但我想让它在悬停时变成白色。什么好主意吗?

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

对于CSSOM，渐变类型为，并且您不能从变成了纯色。
你能做的就是从到另一个，所以我们应该能够在两个渐变之间转换，但在撰写本文时，似乎没有浏览器支持svg渐变之间的转换，也没有浏览器支持CSS渐变作为fill值。

的作用是转换<stop>元素的stop-color值。
为了使这种情况仅在<path>悬停时发生，我确实更改了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>