Android 浏览器中的 SVG 渲染问题

Question

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

Android截图（假渲染）

应该是这样的：

Android 截图（正确渲染）

这是精灵的 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 上。要解决这个问题，只需在文件中为 svg 标签指定 width 和 height 属性。