Android浏览器中的SVG渲染问题

Question

在旧Android版本的默认Android浏览器中（4.1，可能是4.2 / 4.3 [它在客户的Android设备上，我不确定他使用的是哪个版本]）SVG精灵无法正确呈现。 浏览器显示较小版本的图片，而不是显示正确大小的正确剪辑，显示整个精灵，如下面的屏幕截图（Android浏览器4.1）：

Android屏幕截图（错误呈现）

它应该是这样的：

Android截图（正确渲染）

这里是sprite的CSS：

.sprite {
  display: inline-block;
  background-image: url('img/sprite.svg');
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  overflow: hidden;
  color: transparent !important;
}

.sprite.logo {
  width: 270px;
  height: 55px;
  background-position: 0 0;
  display: block;
}

[...]

每个其他浏览器（包括Android浏览器4.4）都能正确显示所有内容。

Answer 1

此问题存在于Android 4.3-和IE9上。要解决此问题，只需在您的文件中为width标记指定height和svg属性。