Using CSS, is there a way to change the opacity of

Question

I have this SVG path that changes its color on hover. However, I want its drop-shadow which I created using a filter element to disappear on hover too. Is there a way to do this in CSS? I tried using fill-opacity -- it worked on the rect element, but not on the filter element.

Here's the fiddle with the shadow still visible: http://jsfiddle.net/4d6j4/

Answer 1

I was able to remove the shadow by removing the filter altogether in CSS:

See working jsFiddle demo

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

Then, after some finagling, I was able to successfully transition the drop shadow and the fill color. I had to put the shadow on svg instead of the svg rect with separate :hover styles as well:

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

One caveat seems to be that you have to use transition: all vs transition: filter.

Also, the CSS filter property is not fully cross-browser compatible either.

Here's the current Browser Compatiblity as of 2014.07.21:

Answer 2

You can animate flood-opacity property of feFlood element by css.

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

svg structure:

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

for chrome: Chrome fails to find feFlood element by selector at inline svg. So we need to rewrite css selector by :nth-child pseudo class like this.

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