title: On hover change SVG from colour to gradient with a transition
body: <p>I have an SVG image which I would like to change from a block colour to a gradient. I have got this working, however I would like to have a transition or animation. Is this possible - if so how would it be achieved?</p>
  
  <p><a href="http://jsfiddle.net/otaxjpa2/" rel="noreferrer">http://jsfiddle.net/otaxjpa2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"&gt;
  &lt;defs&gt;
      &lt;linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%" &gt;
          &lt;stop  offset="0" style="stop-color:#1EBEE0"/&gt;
          &lt;stop  offset="1" style="stop-color:#952491"/&gt;
          &lt;animate attributeName="fy"from="0" to="1" dur="5s" repeatCount="indefinite" /&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
      &lt;path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
      C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
      C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
      c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
      c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>svg {
     fill: blue;
      transition: all 0.3s ease;
      display: inline-block;    
              -webkit-transition: fill .4s ease;
          -moz-transition: fill .4s ease;
          -o-transition: fill .4s ease;
          transition: fill .4s ease;  
  }
  
  
  svg:hover {
      fill: url(#gradient);
   }
  </code></pre>
  
  <p>Any pointers would be much appreciated! </p>