SVG 仅在 Safari 中悬停时调整大小答案

【问题标题】：SVG resizes on hover in safari onlySVG 仅在 Safari 中悬停时调整大小
【发布时间】：2014-02-27 12:06:27
【问题描述】：

我有一个奇怪的问题，即 svg 在 safari 中悬停时调整大小。我正在使用 jquery 的悬停来用稍微不同的 svg 替换页面上的 svg。这项工作在所有浏览器中都可以正常工作，除了 safari，由于某种原因，它会在 mouseover 和 mouseout 上完全调整 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 完全忽略尺寸的任何想法？

【问题讨论】：

哇，我不会发疯的。有人知道吗？它与悬停无关 - 也发生在没有悬停的 iPad 上。如果您只是通过单击事件设置 src，它的大小也将不正确。 iOS8 等 1 周看看是否修复！

标签： javascript jquery css svg

【解决方案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");
    }
);

【讨论】：

哇，我不敢相信这对我有用（Mac 和 iOS 上的 Safari），但它确实有效。但是，我确实使用了“？”对于查询分隔符，与任何其他 URL 一样。
是的，忘了说我们的网址总是有 ?已经，因此 & 字符分隔符。很高兴它也对你有用！
我也看到了通过 IMG 标签显示 SVG 的确切问题。当我通过 JavaScript 交换 src 时，SVG 会调整大小。将查询参数添加到 src 解决了这个问题！很好的发现，感谢您的发帖！
这就是答案。很棒。
所以这行得通。耶！但参数必须完全是“SafariFix”——有人知道为什么吗？

【解决方案2】：

几天前我遇到了类似的问题 - 尝试在 CSS 中为 SVG 赋予“宽度：自动”并尝试它是否有效。

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

【讨论】：

顺便说一句，我用来自谷歌的两张随机图片尝试了你的代码，但它没有在 Safari 中调整大小，所以我可能无法追溯到底是什么问题。

【解决方案3】：

这是一个令人讨厌的错误，简单明了，可能无能为力（经过大量搜索，我当然找不到任何解决方案）。

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

这里有可能的解决方案

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

我想我会采用两个图像的方法。

注意：我没有 Mac 版 Safari，只在装有 iOS7 的 iPad 上进行了测试

【讨论】：

我希望预加载图像可以工作，但它似乎没有

【解决方案4】：

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

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

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

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

截图：

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

【讨论】：

进一步说明：CSS 中定义的宽度和高度值应与图像的 SVG 代码中为图像定义的值相同。即使您偏离 1 个像素，该错误也会出现。

【解决方案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');
}

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

【讨论】：

【解决方案6】：

我在 Safari 11.1 上尝试了此线程中的所有解决方法，但最终找到了一个新方法。

该错误似乎仅在存在影响背景的 CSS 过渡时触发 - 使用 transition: color 很好，但 transition: all 不是。

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

【讨论】：