暗图像上的灰度SVG过滤器结果不佳_Svg_Grayscale_Svg Filters

暗图像上的灰度SVG过滤器结果不佳

svg

暗图像上的灰度SVG过滤器结果不佳,svg,grayscale,svg-filters,Svg,Grayscale,Svg Filters,当我将灰度SVG过滤器应用于深色图像时，结果中会出现明显的带状。我使用的过滤器是： <!doctype html> <html> <head> <style> img { filter: url(#grayscale); /* Firefox */ filter: gray; /* IE */ -webkit-filter: grayscale(1); /*

当我将灰度SVG过滤器应用于深色图像时，结果中会出现明显的带状。我使用的过滤器是：

     <!doctype html>
     <html>
     <head>
     <style>
      img {
     filter: url(#grayscale); /* Firefox */     
     filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Webkit */
    }
      img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }
       </style>
    </head>
  <body>
  <img src="http://www.walldoze.com/static/cache/2048x2048/hd-wallpapers-space-iphone-  wallpaper-retina-2048x2048-wallpaper.jpg" width="1000">
  <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale" >
 <feColorMatrix type="matrix"  values="0.3333 0.3333 0.3333 0 0.001 0.3333 0.3333 0.3333 0 0.001 0.3333 0.3333 0.3333 0 0.001 0 0 0 1 0.001"/>
  </filter>
  </svg>
  </body>
  </html>


img{
过滤器：url（#灰度）；/*Firefox*/
过滤器：灰色；/*IE*/
-webkit过滤器：灰度（1）；/*webkit*/
}
img：悬停{
过滤器：无；
-webkit过滤器：灰度（0）；
}

要获得更好的性能，可以在“过滤器”属性中将“颜色插值过滤器”属性设置为“sRGB”：

<filter id="greyscale" color-interpolation-filters="sRGB">
  <feColorMatrix type="saturate" values="0"/>
</filter>

Safari中不支持颜色插值过滤器，但据我所知，我附上了一张图像，如果你看，你会发现像素化非常糟糕