Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
firefox中的Svg灰度过滤器错误_Firefox_Svg_Filter_Svg Filters - Fatal编程技术网

firefox中的Svg灰度过滤器错误

firefox中的Svg灰度过滤器错误,firefox,svg,filter,svg-filters,Firefox,Svg,Filter,Svg Filters,我在目前正在开发的网站上使用svg过滤器。这应该是去饱和的图像,当我悬停时,它们应该回到正常的彩色状态。我使用了一个在线教程,它在Chrome上非常有效,比如safari。。但在firefox中,图像不会显示,只是blanc,当你在图像上方悬停时,图像会突然以彩色状态显示。我曾尝试寻找解决方案,但我发现的唯一类似案例是因为错误的ID 我的svg代码: <svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"

我在目前正在开发的网站上使用svg过滤器。这应该是去饱和的图像,当我悬停时,它们应该回到正常的彩色状态。我使用了一个在线教程,它在Chrome上非常有效,比如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>
我在firefox中遇到的控制台错误是:

分析“筛选器”的值时出错。声明被撤销

如果你需要额外的信息,我很乐意提供。 先谢谢你。
蒂莫西

作为未来的参考,因为这是一个很老的问题,我不确定OP是否还需要这个

.SVG:

*确保更改CSS中过滤器的路径和名称,以匹配file.svg和ID

#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);
}
<?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>
.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);
}