javascript - SVG 仅在 safari 中悬停时调整大小

Question

我有一个 svg 在 safari 中悬停时调整大小的奇怪问题。我正在使用 jquery 的悬停将页面上的 svg 替换为稍微不同的 svg。这项工作在除 safari 之外的所有浏览器中都能正常工作，safari 出于某种原因会在鼠标悬停和鼠标移出时完全调整 svg 的大小。

我的 svg 的高度是在 css 中设置的

img.svg-graphic {
  height: 180px;
}

并以图片的形式显示在页面上

<div class="container">
  <img class="svg-graphic" src="svg-icons/version1.svg">
</div>

当我将鼠标悬停在容器上时，我将 svg 换成另一个，然后在悬停时返回默认值。

$('.container').hover(function() {
  $('.svg-graphic').attr('src', 'svg-icons/version2.svg');
}, function() {
  $('.svg-graphic').attr('src', 'svg-icons/version1.svg');
});

关于什么可能导致 safari 完全忽略大小的任何想法？

Answer 1

这绝对是一个奇怪的 Safari 错误。我认为这与Safari如何从缓存中恢复原始图像有关。无论如何，我找到了一种适用于我们的悬停代码的解决方法。如果通过额外的查询字符串参数使恢复图像的 URL 唯一，似乎可以避免 SVG 调整大小错误。这是我们网站上的代码(注意恢复时的“&SafariFix”查询字符串参数):

// activate any img hovers based on the hover-src attribute
$("img[data-hover-src]").closest("a").hover(
    function () {
        var image = $(this).find("img[data-hover-src]");
        if (image.data("originalSrc") === undefined) {
            image.data("originalSrc", image.attr("src"));
        }
        image.attr("src", image.data("hoverSrc"));
    }, function () {
        var image = $(this).find("img[data-hover-src]");
        image.attr("src", image.data("originalSrc") + "&SafariFix");
    }
);