Question

在Safari中使用SVG精灵时，我似乎有一种奇怪的行为。 IE，Firefox和Chrome的现代版本都正确显示我的图标，而Safari则没有。我正在尝试使用以下css样式显示我的徽标图标：

.icon-logo {
    background: url('../images/sprites/graphics-sprite.png');
    background-image: url('../images/sprites/graphics-sprite.svg'), none;
    background-size: 341px 236px;
    background-position: 0 0;
    height: 40px;
    width: 110px;

}

然而，我所看到的只是110x40px空间中整个精灵图像的非常小的版本，而不仅仅是徽标所在的部分。当使用devloper工具进行调试然后删除SVG背景图像时，它似乎工作 - 我现在只看到徽标。完全删除代码中的PNG时，它仍然无效。到目前为止，我已尝试过在互联网上找到的所有内容，但无法使其正常运行。

好吧，我确实得到了一个版本，那就是通过交换带有宽度和高度值的背景大小，如下所示：

.icon-logo {
    background: url('../images/sprites/graphics-sprite.png');
    background-image: url('../images/sprites/graphics-sprite.svg'), none;
    background-size: 110px 40px;
    background-position: 0 0;
    height: 341px;
    width: 236px;

}

现在它适用于Safari，但在其他浏览器中无效。其他浏览器的行为与之前的Safari完全相同。

看到PNG版本似乎正常工作，它必须与SVG图像有关。在Safari中处理SVG-sprite图像时，我有什么遗漏吗？

编辑：iPhone和iPad上的Safari会正确显示图标。这似乎只发生在windows-safari上。

非常感谢任何帮助。

谢谢和最诚挚的问候，迈克尔

Safari中使用SVG精灵的奇怪行为

0 个答案: