При наведении изменения SVG от цвета к gradleиенту с переходом

У меня есть SVG-изображение, которое я хотел бы изменить от цвета блока до gradleиента. У меня есть эта работа, однако я бы хотел иметь переход или анимацию. Возможно ли это – если да, то как это будет достигнуто?

http://jsfiddle.net/otaxjpa2/

HTML:

          

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

Любые указатели были бы высоко оценены!

Поместите два стиля заливки на перекрывающиеся объекты и используйте значок часов в качестве объекта маски, применяемого к обоим объектам . Затем вы можете анимировать видимый стиль заполнения, оживляя непрозрачность самого верхнего . Не забудьте применить белое заполнение к объекту маски (белый = непрозрачный, черный = прозрачный).

Если следующий fragment не работает, попробуйте эту ссылку jsfiddle .

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

Вы можете избежать использования двух прямоугольников, переведя вместо этого stop-color :

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