css filter invert（）不工作在mozilla firefox？ [英] css filter invert() not working on mozilla firefox?

问题描述

我有一个恼人的问题与CSS过滤器invert（）;
这是插入jQuery .ready（）上下文中的代码：

  $（' colorcontrast'）bind（'click'，function（）{
 
 var css ='html {'+ 
'filter：invert（100％）;'+ 
' -webkit-filter：invert（100％）;'+ 
'-o-filter：invert（100％）;'+ 
'-ms-filter：invert '; 
 
 if（！window.counter）{
 window.counter = 1; 
} else {
 window.counter ++; 
 if （window.counter％2 == 0）{
 css ='html {'+ 
'-webkit-filter：invert（0％）;'+ 
'-moz-filter： invert（0％）;'+ 
'-o-filter：invert（0％）;}'; 
} 
}; 
 
 console.log css）; 
 
 $（'＃contrast'）。html（css）; 
 
}）; 
 

它适用于Chrome和IE9，但不适用于Firefox 25.
当我访问其使用Firefox的 doc参考页，我意识到现场演示不工作！
有人知道什么吗？和任何人可能指出我的其他方式或解决方案应用这样的过滤器？
提前感谢。

解决方案

您可以使用 SVG过滤器。我基本上是一个使用XML结构的矢量形状图形语言。有了这个，你不仅可以创建矢量形状，还可以修改不同的元素。
我不知道SVG文件是如何产生特定效果的（为什么它不支持正常的invert（），但是这个支持）。

我使用的xml档案：

 < svg xmlns = \'http：//www.w3 .org / 2000 / svg \'> 
< filter id = \'invert\'> 
< feColorMatrix in ='SourceGraphic'type ='matrix'values =' -  1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/> 
< / filter> 
< / svg> 
  

我使用的css + xml网址：

  filter：url（data：image / svg + xml; utf8，< svg xmlns = \'http：//www.w3.org/2000/svg\' >< filter id = \'invert \'>< feColorMatrix in ='SourceGraphic'type ='matrix'values =' -  1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>< / filter>< / svg> #invert）; 
  

我知道颜色不像原来一样，但它是一个替代品。
注意这只是一个'hack'为firefox，你可以只使用静态过滤器的其他浏览器。

---

有关此主题的更多信息：

最新版本

W3School教程

Morzilla探索

a SVG generator online 。

更多关于SVG在互联网上的信息探索

---

你不能找到所有的效果在发电机，但我可能有用的看不同的结构具有不同的效果。您可能需要先阅读对XML的一些基本了解：）

jsFiddle

---

关于此问题的其他主题：

I'm having an annoying issue with the css filter invert(); on Firefox 25. This is the code, inserted inside jQuery .ready() context:

$('#colorcontrast').bind('click', function() {

        var css = 'html {'+
                    ' filter:invert(100%);' + 
                    ' -webkit-filter: invert(100%);' +                    
                    ' -o-filter:invert(100%);' + 
                    ' -ms-filter:"invert(100%)"; }';      

        if (!window.counter) { 
            window.counter = 1;
        } else  { 
            window.counter ++;
            if (window.counter % 2 == 0) { 
                css = 'html {'+
                    ' -webkit-filter:invert(0%);' +
                    ' -moz-filter:invert(0%);' +
                    ' -o-filter:invert(0%); }';
            }
        };

        console.log(css);

        $('#contrast').html(css);

    });

It works fine on Chrome and IE9, but not in Firefox 25. When I visited its doc reference page using Firefox, I realized the live demo wasn't working! Does anyone know something about? And could anyone point me other way or solution to apply such filter? Thanks in advance.

解决方案

You may want to use a SVG filter. I basically a vector-shape graphic language which uses a XML structure. With this you can not only create vector shapes but also modifie different element.
I'm not sure how a SVG file does generate a specific effect(why it wouldn't support the normal invert(), but this one does support).

The xml file i used for this:

<svg xmlns=\'http://www.w3.org/2000/svg\'>
  <filter id=\'invert\'>
    <feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>
  </filter>
</svg>

The css + xml url i used:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");

I know the color isn't excactly the same as the original one, but it is an alternative. Note this is just a 'hack' for firefox, you can just use static filters for other browsers.

---

More info about this subject:

Latest version

W3School tutorial

Morzilla explenation

a SVG generator online.

More info about SVG in Internet Explore

---

You can't find all effects in the generator, but i might be usefull to see different structure with different effects. You might want to read some basic understanding of XML first :)

jsFiddle

---

Other topic about this matter: What's the CSS Filter alternative for Firefox?

这篇关于css filter invert（）不工作在mozilla firefox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！