title: Change svg gradient to solid white with a transition?
body: <p>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?</p>
  <pre><code>svg {
    width: 20px;
    height: 20px;
    path {
      transition: fill 0.4s ease;
      &amp;:hover {
        fill: $white;
      }
    }
  }
  </code></pre>
  <pre><code>&lt;svg id=&quot;Facebook_icon&quot; data-name=&quot;Facebook icon&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;8.713&quot; height=&quot;16.779&quot; viewBox=&quot;0 0 8.713 16.779&quot;&gt;
      &lt;defs&gt;
          &lt;linearGradient id=&quot;linear-gradient&quot; x1=&quot;0.5&quot; x2=&quot;0.5&quot; y2=&quot;1&quot; gradientUnits=&quot;objectBoundingBox&quot;&gt;
          &lt;stop offset=&quot;0&quot; stop-color=&quot;#f7d077&quot;/&gt;
          &lt;stop offset=&quot;0.112&quot; stop-color=&quot;#ffefaa&quot;/&gt;
          &lt;stop offset=&quot;0.269&quot; stop-color=&quot;#ffdb74&quot;/&gt;
          &lt;stop offset=&quot;0.552&quot; stop-color=&quot;#dba846&quot;/&gt;
          &lt;stop offset=&quot;0.808&quot; stop-color=&quot;#dba846&quot;/&gt;
          &lt;stop offset=&quot;1&quot; stop-color=&quot;#f4cd6f&quot;/&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;path id=&quot;Icon&quot; d=&quot;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&quot; fill=&quot;url(#linear-gradient)&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>