html - svg 过滤器不适用于 FF with godaddy

Question

我一直在关注此问答以在我的图像上设置灰度和透明度并使它们在 :hover 时恢复正常， Convert an image to grayscale in HTML/CSS

它在 safari/chrome 上工作得很好，但由于某些原因它不能在 firefox 上工作。图像只是不可见，但 :hover 有效(图像看起来像他们应该的那样，通常)

我已经更新了我的 .htaccess 并联系了 GoDaddy 支持，他们在测试后告诉我 .svg MIME 类型已在服务器上注册并正常工作。我也有离线问题，所以我猜这是我的 .css 的 .svg 的问题，但无法弄清楚是什么，因为我尝试了具有相同结果的不同解决方案。

我的过滤器.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>

我的样式.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;
}

非常感谢，乔 :)

Answer 1

您的过滤器 ID 在 filter.svg 中是“去饱和”的。这与您在 CSS 中调用的内容不匹配(您调用的是“灰度”)。要么更改您的 css 以使用 filters.svg#desaturate或更改 svg 文件以使用 <filter id="grayscale"> .