SVG仅在狩猎时调整大小

Question

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

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

Answer 2

几天前我遇到了类似的问题 - 尝试在 CSS 中给 SVG 一个“width: auto”并尝试它是否有效。

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