在 IE 9+ 中要变灰的图像
Image to be grayed in IE 9+
我希望图像在 IE 9+ 中变灰，当我悬停鼠标时它显示原始图像
一切正常，但问题是当我悬停时它会缩放图像
find code in below fiddle
缩放是因为您的 jpg (105×58) 比您的 svg (96×53) 稍大。当 jpg 被 <image> 引用时，它被缩放以适应 <image> 的尺寸。这对于灰色图像按预期工作，但对于悬停效果失败。在悬停时，您为 <image> 设置 opacity:0，这使 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.
我希望图像在 IE 9+ 中变灰，当我悬停鼠标时它显示原始图像
一切正常，但问题是当我悬停时它会缩放图像
find code in below fiddle
缩放是因为您的 jpg (105×58) 比您的 svg (96×53) 稍大。当 jpg 被 <image> 引用时，它被缩放以适应 <image> 的尺寸。这对于灰色图像按预期工作，但对于悬停效果失败。在悬停时，您为 <image> 设置 opacity:0，这使 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.