是否可以使用CSS代码为SVG滤镜的不透明度设置动画效果？

Question

我有一个svg图像作为一个按钮。当您将鼠标悬停在按钮上时，svg填充将更改为其他颜色，但我也希望我创建的内部阴影滤镜也可以显示。也就是说，要从0％不透明度变为100％。

我能够用css转换来改变填充颜色。是否有可能用css改变滤镜的不透明度？

下面是SVG代码：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="36.25px" height="23px" viewBox="5 -5 36.25 23" enable-background="new 0 0 36.25 23" xml:space="preserve"> 

<!--Definiciones del Filtro--> 
<filter id="sombra" x="-50%" y="-50%" width="200%" height="200%"> 
<feComponentTransfer in="SourceAlpha"> 
<feFuncA type="table" tableValues="1 0" /> 
</feComponentTransfer> 
<feGaussianBlur stdDeviation="1"/> 
<feOffset dx="-1" dy="-1" result="offsetblur"/> 
<feFlood flood-color="rgb(20, 0, 0)" result="color"/> 
<feComposite in2="offsetblur" operator="in"/> 
<feComposite in2="SourceAlpha" operator="in" /> 
<feMerge> 
<feMergeNode in="SourceGraphic" /> 
<feMergeNode /> 
</feMerge> 
</filter> 

<g filter="url(#sombra)"> 
<polygon points="23.671,8.625 23.671,4.657 21.786,4.657 21.786,7.513 18.255,5.433 18.194,5.398 18.058,5.398 
4.724,13.249 5.502,14.57 7.862,13.179 7.862,18.343 9.396,18.343 9.396,12.276 18.128,7.138 26.854,12.276 26.854,18.343 
28.388,18.343 28.388,13.179 30.75,14.57 31.526,13.249 "/> 

<rect x="15.289" y="11.553" width="2.44" height="2.444"/> 
<rect x="18.523" y="11.553" width="2.438" height="2.444"/> 
<rect x="15.289" y="14.656" width="2.44" height="2.439"/> 
<rect x="18.523" y="14.656" width="2.438" height="2.439"/> 
</g> 
</svg> 

这里是CSS：

#Capa_1{ 
fill:#FFFFFF; 
-webkit-transition: fill 0.3s; 
} 

#Capa_1:hover{ 
fill:#8A653B; 
} 

在此先感谢...！

Answer 1

是MDN doc有动画过滤的工作草案。

但not a lot of support是目前市面上:(

而且对SVG元素只在Firefox

下面是火狐狸用户小提琴：Fiddle

应用的SVG滤镜：filter: url(#filterid)
应用svg不透明度滤镜：filter: opacity(50%);
并合并：filter: url(#filterid) opacity(50%);

Answer 2

经过几个小时的搜索，有人已经回答了这个问题。

这里的变通方法： Using CSS, is there a way to change the opacity of an SVG's <filter> element?

它能解决相当不错的Firefox和Chrome的最新版本。虽然SVG动画在IE中似乎并不能很好地工作，但是滤镜的不透明度确实发生了变化。

谢谢！