我有一个SVG图像,我想从块颜色更改为渐变。我有这个工作,但我想要一个过渡或动画。这是否可能 - 如果是的话,将如何实现?关于悬停更改SVG从颜色到渐变的转换
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);
}
任何指针将不胜感激!
你不能(AFAIK)。你正在绑定动画,实际上是一个背景图像...而那些没有中间步骤,所以他们不能使用CSS动画。 – 2014-10-31 13:01:13
最好的情况是,你**可能**能够使用渐变为你的初始'填充'和通过JS动画属性。 – 2014-10-31 13:10:45
目前我正在尝试探索动画类 - 也许如果我可以将它作为我的填充颜色启动,然后将其设置为渐变 - 这是我迄今取得的进展:http://jsfiddle.net/otaxjpa2/ 5/ – user1788364 2014-10-31 13:14:46