Joomla中的灰度图像支持IE 10

Question

我已经阅读灰度图像支持一段时间了。我找到了在模板中使用CSS代码的解决方案.css：

    .partner {
  filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
.partner:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

对于图像本身，我正在使用：

<img class="partner" src="/joom/images/partners/image.png" alt="image logo" height="30" width="105">

但是，这不适用于IE9和IE10,11的下一个版本...我知道我应该使用 SVG 让它在 IE10 上运行。所以我需要同时使用CSS和JS。我需要使用哪些文件和代码来获得对图像的 SVG 灰度支持？谢谢！

Answer 1

对于IE10/11，您必须通过SVG <image>元素而不是html <img>元素显示图像。在 IE 中，只有 SVG 元素可以使用过滤器。即

<svg height="30" width="105">
    <image class="partner" xlink:href="/joom/images/partners/image.png"  height="30" width="105">
        <desc>image logo</desc>
    </image>
</svg>