悬停图像替换后，SVG 图像在 Mac Safari 中以不正确的大小呈现答案

【问题标题】：SVG image renders at incorrect size in Mac Safari after hover image replace悬停图像替换后，SVG 图像在 Mac Safari 中以不正确的大小呈现
【发布时间】：2014-10-28 19:45:43
【问题描述】：

请看小提琴：http://jsfiddle.net/deshg/8q1pkcna/5/，它显示了一个非常简化的 img 悬停效果。它替换了 mouseenter/mouseleave 上 svg img 的 src，并且 img 的大小在 CSS 中专门定义（代码如下）。

这在所有浏览器上都可以正常工作，除了 Mac Safari 7，它使原始 SVG img 在悬停后替换它时（鼠标离开时）要小得多。它将图像报告为正确的尺寸，但显示的尺寸要小得多，所以我最初认为这是一个 svg 视图框问题或这方面的问题，但是我尝试更改视图框和 preserveAspectRatio 值但没有效果。此外，svg 最初显示正确，因此实际的 svg 文件存在问题是没有意义的。

如果可能的话，我希望避免手动编辑 svg 文件，因为这会使普通用户添加 SVG 变得更加困难，但我不认为它们是问题所在。

任何人都可以解释为什么会发生这种情况以及如何解决它，因为这是一个非常奇怪的问题！

仅供参考，SVG resizes on hover in safari only 有另一个帖子，涵盖了类似的主题，但没有答案或报告的错误的链接。

非常感谢！

<div id="container">
    <img src="https://dl.dropboxusercontent.com/s/3o4xrlvax9b08u4/svghover.svg" class="svghover">
</div>

#container {
 width: 100%; background-color: #000000; 
}

img {
width: 100px;
height: 100px;
}

$(document).on({
mouseenter: function () {
    var t = $(this);
    t.attr("src", function(index, attr){
        var src = t.attr("src");
        return attr.replace(src, "https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg");
    });
},
mouseleave: function () {
    var t = $(this);
    t.attr("src", function(index, attr){
        var src = t.attr("src");
        return attr.replace(src, "https://dl.dropboxusercontent.com/s/3o4xrlvax9b08u4/svghover.svg");
    });
}
}, "img.svghover");

【问题讨论】：

标签： jquery html css svg safari

【解决方案1】：

我刚刚在这里遇到了你的问题，我不知道这对你是否仍然重要，但是......

我遇到了类似的情况。我不是基于鼠标悬停替换图像的内容，而是基于其他一些复杂的条件。无论如何，我遇到了同样的问题：图像大小不正确。

我能够通过不使用 img 标签而是使用带有对象的 div 来解决它。然后当我需要更换 SVG 时，我会更换整个对象。我不知道这是否适用于您正在尝试做的事情，但它可能值得一试。下面是一个使用对象嵌入 SVG 文件的简单示例：

<object data="my_file.svg" type="image/svg+xml"></object>

【讨论】：

其实，我猜你也可以替换整个图像，而无需切换到对象标签。

【解决方案2】：

我所做的是删除图像并重置它。这不是最好的解决方案，但它确实有效。

var clone = $("img#unique").clone();
clone.attr("src", "newSrc");
$("img#unique").remove(); 
clone.appendTo($("img#unique").parent());

【讨论】：