Firefox中的Svg灰度过滤器错误答案

【问题标题】：Svg grayscale filter in firefox errorFirefox中的Svg灰度过滤器错误
【发布时间】：2012-12-05 10:58:58
【问题描述】：

我正在我目前正在处理的网站上使用 svg 过滤器。它应该使图像去饱和，当我悬停时，它们应该恢复到正常的彩色状态。我使用了一个在线教程，它在 Chrome、IE、safari 中运行良好。但在 Firefox 中，图像不显示，它只是 blanc，当你将鼠标悬停在它们上方时，它们会突然以彩色状态显示。我曾尝试寻找解决方案，但我发现的唯一类似情况是因为 ID 错误。

我的 svg 代码：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <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代码：

#thumbnails li img
{
    width: 31%;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    margin-bottom: 1.3%;
    margin-top: 1.3%;
}

#thumbnails img:hover 
{
    filter: none;
    -webkit-filter: grayscale(0);
}

我在 Firefox 中得到的控制台错误是：

解析“过滤器”的值时出错。声明被删除

如果您需要额外的信息，我很乐意提供。非常感谢提前。提摩太

【问题讨论】：

标签： firefox svg filter svg-filters

【解决方案1】：

供将来参考（因为这是一个很老的问题，我不确定 OP 是否还需要这个......）

.SVG：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <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：

.YOUR_DIV img {
    width: 260px;
    height: 190px;
     filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(PATH/TO/SVG/**filter**.svg#grayscale); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.YOUR_DIV img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

*请务必更改 CSS 中过滤器的路径和名称以匹配您的 file.svg 和 ID。

【讨论】：