SVG渲染問題

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

的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）示出正確的一切。

來源

2014-12-04 Simon Jentsch

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

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

來源

2015-02-08 09:05:51

SVG渲染問題

回答

相關問題