答案 0 :(得分：1)
缩放是由于你的jpg比你的svg（96×53）略大（105×58）。当jpg被<image>引用时，它会缩放以适合<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。