Question

我有这个奇怪的问题，svg在safari中悬停时调整大小。我正在使用jquery的悬停来替换svg略有不同的页面上的svg。这项工作适用于除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调整大小错误。这是我们网站上的代码（请注意＆＃34;＆amp; SafariFix＆＃34;还原时的查询字符串参数）：

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

Answer 3

这是一个令人讨厌的错误，简单明了，而且可能无法做任何事情（经过多次搜索后我找不到任何解决方案）。

图像报告的大小正确，即使您在图像周围放置1px边框，它也只会缩小到此边界框内。它也非常不一致且不可重复。如果您有响应式设计并调整页面大小，则图像会自行修复。

以下是可能的解决方案

等待Safari 8（或者下一个版本的任何内容）而忘记它
禁用Safari的翻转
使用png / jpg图片
将两个图像叠加在一起，显示并隐藏它们而不是替换

我想我会采取两种图像方法。

注意：我没有适用于Mac的Safari，并且只在使用iOS7的iPad上进行测试

Answer 4

我遇到了这个错误，我花了一些时间和相当多的实验（和挫折）才最终找到解决方案。

基本上，如果源和目标SVG图像的宽度和高度不相同，那么您将遇到此错误。

我能够通过编辑SVG文件本身的宽度和高度属性来克服这个错误：

width="20px" height="20px"

屏幕截图：

如果确保源SVG图像和目标SVG图像上的这些值相同，则应解决此错误。

Answer 5

这里提出的解决方案似乎都不适用于我目前正在处理的内容，因为我将SVG加载为背景图片而不是img或svg标记。我觉得悬停效果对于UX来说比拥有SVG更重要，所以我针对包含SVG背景图像的元素并添加了safari类，因此我可以强制使用CSS来使用PNG后备。当然可以采用更好/更高效的方式处理这个问题，但这是我的jQuery：

if ( navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 )  {
  $('*').each( function() {
    if ( ! $(this).css('background-image') ) {
      return;
    } else if ( ~ $(this).css('background-image').indexOf(".svg") ) {
      $(this).addClass('safari');
    }
  });
}

然后我只使用CSS中的safari辅助类来设置一些回退：

.element {
  background-image: url('img.png');
  background-image: url('img.svg');
}

.element:hover {
  background-image: url('img-hover.png');
  background-image: url('img-hover.svg');
}

.element.safari {
  background-image: url('img.png');
}

.element.safari:hover {
  background-image: url('img-hover.png');
}

虽然这在具体案例中并没有真正帮助，但它可能会帮助通过搜索偶然发现这个答案的其他人。

Answer 6

我尝试了该线程中的所有变通方法，但在Safari 11.1上均无济于事，但最终找到了一个新的变通方法。

该错误似乎仅在存在影响背景的CSS过渡的地方触发–使用transition: color很好，但是{strong>不能可以使用transition: all。

I've put together a CodePen演示了这个问题。

SVG仅在狩猎时调整大小

6 个答案: