使用 CSS，有没有办法改变 SVG <filter> 元素的不透明度？

Question

我有这个 SVG 路径，它可以在 hover 上改变它的颜色。但是，我希望它使用filter 元素创建的阴影也消失在hover 上。有没有办法在 CSS 中做到这一点？我尝试使用 fill-opacity - 它适用于 rect 元素，但不适用于 filter 元素。

这是阴影仍然可见的小提琴：http://jsfiddle.net/4d6j4/

Answer 1

您可以通过 css 为 feFlood 元素的 Flood-opacity 属性设置动画。

http://jsfiddle.net/defghi1977/SwHDR/

svg 结构：

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect x="10" y="10" width="90" height="90"/>
    <defs>
        <filter id="f4" x="-50%" y="-50%" width="200%" height="200%">
            <feOffset dx="20" dy="20" result="offOut"/>
            <feFlood/>
            <feComposite operator="in" in2="offOut"/>
            <feGaussianBlur stdDeviation="10"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
</svg>

css:

feFlood{
    flood-color: navy;
}
rect{
    filter:url(#f4);
    fill:aqua;
    stroke:green;
    stroke-width:2;
}
rect,feFlood{
    transition:all 2s;
}
rect:hover{
    fill:blue;
}
rect:hover+defs feFlood{
    flood-opacity:0;
}

对于铬： Chrome 无法通过内联 svg 的选择器找到 feFlood 元素。所以我们需要像这样用 :nth-child 伪类重写 css 选择器。

http://jsfiddle.net/defghi1977/djMq8/1/

filter#f4>:nth-child(2){
    flood-color: navy;
}
rect{
    filter:url(#f4);
    fill:aqua;
    stroke:green;
    stroke-width:2;
}
rect,filter#f4>:nth-child(2){
    transition:all 2s;
}
rect:hover{
    fill:blue;
}
rect:hover+defs>filter#f4>:nth-child(2){
    flood-opacity:0;
}

Answer 2

我可以通过在 CSS 中完全移除 filter 来移除阴影：

See working jsFiddle demo

svg rect:hover
{
    fill: blue;
    filter: none;
}

然后，经过一番摸索，我成功地转换了阴影和填充颜色。我不得不将阴影放在 svg 上，而不是 svg rect 和单独的 :hover 样式：

See working jsFiddle demo

HTML

<svg>
    <rect width="90" height="90" />
</svg>

CSS

svg
{
    transition: all 2s;

    -webkit-filter: drop-shadow(20px 20px 10px black);
       -moz-filter: drop-shadow(20px 20px 10px black);
            filter: drop-shadow(20px 20px 10px black);
}
svg rect 
{
    transition: all 2s;

    fill: aqua;
    stroke: green;
    stroke-width: 2;
}
svg:hover 
{
    -webkit-filter: drop-shadow(0 0 0);
       -moz-filter: drop-shadow(0 0 0);
            filter: drop-shadow(0 0 0);
}
svg:hover rect 
{
    fill: blue;
}

一个警告似乎是您必须使用 transition: all 与 transition: filter。

此外，CSS filter 属性也不完全跨浏览器兼容。

这是截至 2014.07.21 的当前Browser Compatiblity：