Image 图像在IE 9+中变灰；

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

一切都很好，但问题是，当我悬停时，它会缩放图像

find code in below fiddle 

---

缩放是因为jpg比svg（96×53）稍大（105×58）。当jpg被

引用时，它被缩放以适合

的尺寸。这与灰色图像的预期效果相同，但对于悬停效果无效。在悬停状态下，为呈现svg背景可见的

设置

不透明度：0

。但是，背景图像不会缩放以适应尺寸，而是剪裁为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" />

---

查看更新的。

谢谢，非常感谢