SVG sprite 图标背景位置在较新版本的 Chrome 中显示为关闭

Posted 2023-05-08

【中文标题】SVG sprite 图标背景位置在较新版本的 Chrome 中显示为关闭

【英文标题】：SVG sprite icon background position appears off in newer version of Chrome

【发布时间】：2014-08-22 11:05:19

【问题描述】：

我正在使用background-image SVG sprite，在我的 Safari、移动版 Safari、Chrome、Firefox、Opera、IE 等版本上，一切看起来都很棒。但是，对于一些我的同事拥有较新版本的 Chrome（我知道其中一位在 Mac 上使用版本 35.0.1916.153，有些在 Windows 上使用不同的较新版本）。

这是在我的所有浏览器版本中的样子：

以下是一些较新版本的 Chrome 中的外观：

html：

<span class="icon icon--chat"></span>

CSS：

.icon
    background:url(data:image/svg+xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;


.icon--chat
    background-position:0 4%;

当我将它放在 JsFiddle 和 Codepen 上时，完全相同的代码在我同事的浏览器中正常运行，但无论如何：http://jsfiddle.net/HgR2N/

以下是我尝试过的一些未解决问题的方法：

将背景图像从数据 URI 编码的 SVG 更改为 常规 .svg 文件 对background-position 使用像素而不是百分比 添加 font-family:sans-serif;（我在某个地方读到过可能会解决它的问题 - 不知道） 删除边距、box-sizing:border-box; 等

如果您对可能导致此问题的原因以及我如何解决此问题有任何想法，请告诉我 - 谢谢！

更新：我将我的 Chrome 更新到版本 35.0.1916.153，所以现在我和我的同事正在使用完全相同版本的 Mac 版 Chrome，她的版本搞砸了，而我的仍然很好......

【问题讨论】：

也许您应该将其报告为错误：code.google.com/p/chromium/issues/list 并单击“新问题”按钮

【参考方案1】：

更新：我在 svg 文件的 svg 标签上添加了preserveAspectRatio="none" 作为属性，并且修复了它！更多信息在这里：http://www.yootheme.com/support/question/6801?order=modified

【讨论】：

你为我节省了很多时间。谢谢;)

【参考方案2】：

我遇到了同样的问题。我通过将background-size 设置为精确值来修复它（不使用auto）。 我最初是这样定义我的 svg sprite 的大小的：

.icon 
    background-image: url("sprite.svg");
    background-size: 4em auto;

我改成

.icon 
    background-image: url("sprite.svg");
    background-size: 4em 99em;