android - Android 浏览器中的 SVG 渲染问题

Question

在旧版 Android 版本(4.1，可能是 4.2/4.3 [它位于客户的 Android 设备上，我不确定他使用哪个版本])的默认 Android 浏览器中，SVG Sprite 无法正确渲染。 浏览器不会显示具有正确大小的正确剪辑，而是显示图像的较小版本，显示整个 Sprite ，如下面的屏幕截图所示(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 上存在此问题。要解决此问题，只需在文件中为 svg 标记指定 width 和 height 属性即可。