Question

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

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

Answer 1

我可以通过在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 vs transition: filter。

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

以下是截至2014.07.21的当前Browser Compatiblity：

enter image description here

Answer 2

您可以通过css为feFlood元素设置泛光不透明度属性。

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： Chrome无法在内联svg中通过选择器找到feFlood元素。所以我们需要通过以下方式重写css选择器：nth-child伪类。

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

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

2 个答案: