Question

请看小提琴：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");

Answer 1

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

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

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

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

Answer 2

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

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

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

2 个答案: