2014-12-04 315 views
2

在爲較舊的Android版本中的默認Android瀏覽器(4.1,也許4.2/4.3 [這是一個客戶的Android設備上,我不能完全肯定,他使用的是哪個版本])SVG精靈無法正確顯示。 而不是顯示一個具有正確大小正確的剪裁,瀏覽器顯示圖像的縮小版,顯示整個精靈,像下面的截圖(Android瀏覽器4.1):SVG渲染問題

的Android截圖(假渲染)enter image description here

它應該是這樣的:

的Android截圖(正確渲染) enter image description here

下面是精靈的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)示出正確的一切。

+0

直到Android 4.4(以及部分支持的效果/過濾器)才完全支持SVG:http://caniuse.com/#search=svg – 2014-12-04 16:11:44

回答

4

此問題存在於Android 4.3和IE9上。要解決這個問題,只需在您的文件中爲svg標記指定widthheight屬性即可。