使用filter:grayscale(100%)将图片置灰时遇到的兼容不了ie10+的问题

287 阅读1分钟

解决方法,使用svg filter滤镜

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 288 48" width="288" height="48">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" 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" data-filterid="38" />
    </filter>  
  </defs>  
  <image filter="url(#filtersPicture)" x="0"  y="0" width="288" height="48" href='' />
</svg>