svg 过滤器无法使用 godaddy 处理 FF答案

【问题标题】：svg filter not working on FF with godaddysvg 过滤器无法使用 godaddy 处理 FF
【发布时间】：2012-10-10 09:49:23
【问题描述】：

我一直在关注此问答，为我的图像设置灰度和透明度，并在 :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;
}

提前非常感谢，乔:)

【问题讨论】：

标签： html css firefox svg svg-filters

【解决方案1】：

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

【讨论】：