Al passaggio del mouse cambia SVG da colore a gradiente con una transizione

Question

Ho un'immagine SVG che desidero passare da un colore di blocco a un gradiente. Ho funzionato, tuttavia mi piacerebbe avere una transizione o un'animazione. È possibile? Se sì, come si otterrebbe?

http://jsfiddle.net/otaxjpa2/

HTML:

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
<defs> 
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%" > 
     <stop offset="0" style="stop-color:#1EBEE0"/> 
     <stop offset="1" style="stop-color:#952491"/> 
     <animate attributeName="fy"from="0" to="1" dur="5s" repeatCount="indefinite" /> 
    </linearGradient> 
</defs> 
    <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"/> 
</svg> 

CSS:

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); 
} 

Qualsiasi puntatori sarebbe molto apprezzato!

Answer 1

Inserire i due stili di riempimento sugli oggetti <rect> sovrapposti e utilizzare l'icona dell'orologio come oggetto maschera applicato a entrambi gli oggetti <rect>. È quindi possibile animare lo stile di riempimento apparente animando l'opacità di <rect> più in alto. Ricordarsi di applicare un riempimento bianco all'oggetto maschera (bianco = opaco, nero = trasparente).

Se il seguente snippet non funziona, try this jsfiddle link.

#clock-gradient { 
 
    opacity: 0.0; 
 
    display: inline-block; 
 
    -webkit-transition: opacity .4s ease; 
 
    -moz-transition: opacity .4s ease; 
 
    -o-transition: opacity .4s ease; 
 
    transition: opacity .4s ease; 
 
} 
 
#clock-gradient:hover { 
 
    opacity: 1.0; 
 
}

<svg width="96px" height="96px" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%"> 
 
     <stop offset="0" style="stop-color:#1EBEE0" /> 
 
     <stop offset="1" style="stop-color:#952491" /> 
 
    </linearGradient> 
 
    <mask id="clock-icon-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="512" height="512"> 
 
     <path d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206C462,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,161C417,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.505c-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.081c0.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" fill="white" /> 
 
    </mask> 
 
    </defs> 
 
    <g mask="url(#clock-icon-mask)"> 
 
    <rect x="0" y="0" width="512" height="512" fill="blue" /> 
 
    <rect id="clock-gradient" x="0" y="0" width="512" height="512" fill="url(#gradient)" /> 
 
    </g> 
 
</svg>

Answer 2

È possibile evitare l'uso di due rettangoli, grazie alla transizione i stop-color s invece:

svg { 
 
    display: inline-block; 
 
} 
 

 
stop { 
 
    -webkit-transition: .4s ease; 
 
    transition: .4s ease; 
 
} 
 

 
/* Use the colors to transition to */ 
 
svg:hover stop:first-child { 
 
    stop-color: #1EBEE0; 
 
} 
 

 
svg:hover stop:last-child { 
 
    stop-color: #952491; 
 
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
 
    <defs> 
 
     <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%"> 
 
      <stop offset="0" stop-color="blue" /> <!-- Colors to transition from --> 
 
      <stop offset="1" stop-color="blue" /> 
 
     </linearGradient> 
 
     <mask id="clock-icon-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="512" height="512"> 
 
      <path d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206C462,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,161C417,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.505c-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.081c0.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" 
 
      fill="white" /> 
 
     </mask> 
 
    </defs> 
 
    <g mask="url(#clock-icon-mask)"> 
 
     <rect x="0" y="0" width="512" height="512" fill="url(#gradient)" /> 
 
    </g> 
 
</svg>

Here's a demo della tecnica utilizzando una forma semplificata (senza maschera richiesta).