關於懸停更改SVG從顏色到漸變的轉換

Question

我有一個SVG圖像，我想從塊顏色更改爲漸變。我有這個工作，但我想要一個過渡或動畫。這是否可能 - 如果是的話，將如何實現？

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

任何指針將不勝感激！

Answer 1

將兩個填充樣式放在重疊的<rect>對象上，並將時鐘圖標用作應用於<rect>對象的蒙版對象。然後，您可以通過對最上面的<rect>的不透明度進行動畫處理來製作表觀填充樣式。請記住對蒙版對象應用白色填充（白色=不透明，黑色=透明）。

如果下面的代碼段不起作用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

可以通過轉換的stop-color！而非避免使用兩個rects：

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（無掩碼需要）。