SVG只在悬停在safari上调整大小 [英] SVG resizes on hover in safari only

问题描述

我有这个奇怪的问题，其中svg正在调整大小悬停在safari。我使用jquery的悬停，用一个略有不同的svg替换页面上的svg。

I have this weird issue where an svg is resizing on hover in safari. I'm using jquery's hover to replace an svg on a page with a slightly different svg. This work's properly in all browsers except safari which for some reason completely resizes the svg on mouseover and mouseout.

我的svg的高度是在css

My svg's height is set in the css

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

并以图像形式显示在页面上

And displayed on the page as an image

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

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

When I hover over the container, I swap out the svg with another, and then return to the default when I hover off.

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

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

Any ideas on what could be causing safari to completely ignore the sizing?

推荐答案

这绝对是一个奇怪的Safari bug。我认为这是与Safari如何从缓存中恢复原始图像有关。无论如何，我发现了一个工作在我们的悬停代码的解决方法。如果通过额外的查询字符串参数使恢复的图像的URL唯一，似乎避免了SVG调整大小的错误。这里是我们网站的代码（注意恢复时的& SafariFix查询字符串参数）：

This is definitely a weird Safari bug. I think it is related to how Safari restores the original image from the cache. At any rate, I've found a workaround that works in our hover code. If you make the URL of the restored image unique via an extra query string parameter, it seems to avoid the SVG resize bug. Here's the code from our site (note the "&SafariFix" query string parameter on restore):

// 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");
    }
);

这篇关于SVG只在悬停在safari上调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！