IE10和IE11饱和过滤器

Question

我有问题。我在我的网站上使用CSS过滤器饱和。默认情况下，图像饱和度为40％，悬停时它们是饱和的（100％）。它非常简单，除了IE11之外，它适用于我需要的所有浏览器。我真的需要它在IE11上工作，它可以是css或javascript解决方案。

目前我有这样的事情：

-webkit-filter: saturate(40%);
-moz-filter: saturate(40%);
-o-filter: saturate(40%);
-ms-filter: saturate(40%);
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='saturate40'><feColorMatrix in='SourceGraphic' type='saturate' values='0.4' /></filter></svg>#saturate40");
      filter: saturate(40%);

暂停这个：

filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
-ms-filter: saturate(100%);
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='saturate100'><feColorMatrix in='SourceGraphic' type='saturate' values='1' /></filter></svg>#saturate100");

Answer 1

旧帖子，但我希望使用反转过滤器做类似的事情以获取可访问性。 SVG将使用IE10 +的过滤器。我有一个反向工作演示。我确信它可以适应饱和图像。

jsfiddle.net/lylel

HTML

<svg id="svg-image-invert">
   <image id="svg-image" width="150" height="150" xlink:href="https://cdn1.iconfinder.com/data/icons/large-black-icons/512/Zoom_search_find_magnifying_glass.png" />
   <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

#svg-image:hover {
   filter: url(#invert);
}