问

SVG仅在狩猎时调整大小

红枫1983_1 发布于 2023-01-29 16:24

svg

我有这个奇怪的问题,svg在safari中悬停时调整大小.我正在使用jquery的悬停来替换svg略有不同的页面上的svg.这项工作适用于所有浏览器,除了safari,由于某种原因完全调整svg在鼠标悬停和mouseout上的大小.

我的svg的高度设置在css中

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

并在页面上显示为图像

当我将鼠标悬停在容器上时,我将svg替换为另一个,然后当我将鼠标悬停时返回默认值.

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

什么可能导致safari完全忽略尺寸的想法？

1 个回答

这绝对是一个奇怪的Safari bug.我认为这与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");
    }
);

2023-01-29 16:26 回答

史彩哲

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签