用jQuery鼠标悬停的Svg颜色转换？

Question

我的html中有一个“svg”标签，这是一个soundcloud图标。我希望soundcloud图标在鼠标悬停时转换颜色，就像我在CSS中使用“transition”属性一样。你可以看看下面链接中soundcloud图标两侧的twitter bootstrap图标，看看我的意思。

我试过这个没有运气：

$(".soundcloud")
.mouseenter(function() {
var color = "#ff7700";
$(this).animate({children().css('fill',color); 
}, 1000) })
.mouseleave(function() {
$(this).animate({children().css('fill','#FAFAFA');
}, 1000)});
});

该网站位于此处：http://itstonygraham.com/archive/dev/

此脚本的一个版本位于结束正文标记之前。

我怎样才能做出类似这样的工作？

Answer 1

如果您考虑使用css3，请查看Adobe关于动画svgs的博客文章

http://blogs.adobe.com/webplatform/2012/03/30/svg-animations-css-animations-css-transitions/

基本上只是在悬停时应用动画类，然后是一些