Search code examples
htmlcssfirefoxsvgsvg-filters

svg filter not working on FF with godaddy

I have been following this Q&A to set a grayscale and transparency on my images and get them to normal on :hover, Convert an image to grayscale in HTML/CSS

it works great with safari/chrome, but for some reason it can't work on firefox. The images are just invisible, but the :hover works (the images appear like they are supposed to, normally)

I have updated my .htaccess with and contacted GoDaddy support, which ends up telling me after doing a test the .svg MIME type is registered on the server and working normally. I also have the problem offline, so I guess it's a problem from my .svg of my .css, but can't figure out what, since I tried different solutions with the same outcome.

My filter.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

My style.css

.logos img {
    filter: url(filters.svg#grayscale); 
    filter: gray;
    -webkit-filter: grayscale(1);
    margin: 10px 20px 10px 20px;
    opacity: .5;
}

.logos img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    opacity: 1;
}

Thanks a lot in advance, Jo :)

Solution

  • Your filter id is "desaturate" in filter.svg. This does not match what you are calling in your CSS (you are calling "grayscale"). Either change your css to use filters.svg#desaturate or change the svg file to use <filter id="grayscale">.