图片在 IE 9+ 中变灰答案

【问题标题】：Image to be grayed in IE 9+图片在 IE 9+ 中变灰
【发布时间】：2015-08-27 16:37:13
【问题描述】：

我希望图像在 IE 9+ 中变灰，当我将鼠标悬停时它显示原始图像

一切正常，但问题是当我悬停时它会缩放图像

find code in below fiddle

Fiddle

【问题讨论】：

标签： image internet-explorer svg grayscale

【解决方案1】：

缩放是由于您的 jpg (105×58) 比您的 svg (96×53) 稍大。当 <image> 引用 jpg 时，它会缩放以适应 <image> 的尺寸。这对灰色图像按预期工作，但对于悬停效果失败。在悬停时，您将 opacity:0 设置为 <image>，这会使 svg 的背景可见。但是，背景图像不会缩放以适应尺寸，而是裁剪到您的 svg 大小。因此规模上的差异。

为了避免这些问题，我更喜欢另一种方法来摆脱背景图像。您可以将原始彩色图像放在灰色图像的正下方。然后，灰色图像将遮住彩色图像，直到悬停时不透明度设置为 0：

<image x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />
<image class="gray" filter="url('#filtersPicture')" x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />

查看更新后的JSFiddle。

【讨论】：

谢谢，非常感谢