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

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

这是解决方法： Using CSS, is there a way to change the opacity of an SVG's <filter> element?

它在当前版本的Firefox和Chrome上运行良好。虽然SVG动画在IE中看起来效果不佳，但过滤器的不透明度确实发生了变化。

谢谢！

Answer 2

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

但 not a lot of support目前可用:(

在svg元素上它只适用于firefox。

这是火狐用户的小提琴：Fiddle

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

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

2 个答案: