Question

您好我一直在努力解决这个问题。使用Chrome的最新版本

版本53.0.2785.116 m

我一直在使用的svg精灵不再出现。它们出现在firefox中的正确位置，即没有问题。

我查看了发行说明，但没有发现任何提及SVG的内容。因为它们在所有其他浏览器上显示，我真的不知道如何解决这个问题。有人有任何线索吗？

以下是我用作参考的一些代码

&.ico-nav {
width: 60px;
height: 60px;
border: 2px solid @eia_green;
border-radius: 100%;
float: left;
margin: 0 15px 15px 0;
background: url(../images/global-nav-icons.svg) no-repeat;
background-size: 1700% 1700%;

/*Sources and Uses Menu*/
&.petro {
  background-position: -20px -225px;
}

&.natural {
  background-position: -20px -330px;
}

&.elec {
  background-position: -20px -430px;
}

&.con {
  background-position: -20px -530px;
}

&.coal {
  background-position: -20px -635px;
}

&.renew {
  background-position: -20px -735px;
}

我也使用symbol和defs方法调用SVG内联，但也没有用。

我玩过维度并且已经有了一个图标来显示，但没有截断精灵本身，它总共有大约80个图标。

感谢任何帮助。

修改----------------------------- <！/强>

此问题似乎与SVG和边界半径有关。我的SVG在Chrome Canary（Beta）上看起来很正常，并且希望这一变化正在进行中。

这是一个与我的问题有关的铬虫，所以Chrome的开发人员都知道！

希望这可以帮助任何体验类似的人。

https://bugs.chromium.org/p/chromium/issues/detail?id=643623

新的Chrome发布SVG Sprites无法通过背景/背景大小/背景位置显示

0 个答案: