我正在使用我正在处理的网站上的svg过滤器。它应该使图像去饱和,当我悬停时它们应该恢复到正常的彩色状态。我使用了一个在线教程,它在Chrome,IE,safari中运行良好。但是在firefox中,图像没有显示,它只是空白,当你在它们上方悬停时,它们突然显示在它们的彩色状态。我试过寻找解决方案,但我发现的唯一类似案例是因为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中遇到的控制台错误是:
解析'filter'的值时出错。宣言失败
如果您需要额外信息,我很乐意提供。 非常感谢提前。 蒂莫西
答案 0 :(得分:0)
对于将来的参考(因为这是一个相当古老的问题,我不确定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。