在Android瀏覽器上的SVG渲染

我遇到了很長時間的問題，找不到解決方案。在Android瀏覽器上的SVG渲染

我有一個SVG圖像作爲CSS左上角的CSS背景。 SVG圖形應該在div背景上無縫合並，而不是在渲染圖形周圍生成細邊框。它在桌面瀏覽器上正常工作（在Chrome，Firefox和Opera上測試過），但在android股票瀏覽器，android版Chrome和android版firefox上失敗。

這裏是一個小的測試用例：http://jsfiddle.net/SDJHA/1/ （該SVG代碼是JavaScript幀作爲評論）

的CSS代碼是：

.cont{ background-color : #7AC943; width : 300px; height : 300px; } 

.elementOne{ 
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%237AC943%22%20points%3D%22100%2C100%20100%2C0%200%2C100%20%22%2F%3E%3C%2Fsvg%3E"); 
    width : 100px; height: 100px; 
    background-size: 100px 100px; 
    background-repeat: no-repeat; 
    background-color : white; 
}

的HTML： <div class="cont"><div class="elementOne"></div></div>

在計算子像素時，它可能是android svg渲染引擎上的一個錯誤...我不知道。

在華碩變壓器和HTC One上測試。

有沒有建議嗎？

謝謝！

來源

2013-08-23 lrpckr

我猜測由於兩個部分合成到頁面上，線條顯示出來。角落是不透明的，並試圖覆蓋更大的div，並且您獲得了一些邊緣消除鋸齒效果。

我想你可能會得到相同的效果，如果svg是相同大小的PNG，假設它以相同的方式應用。

您可能可以使用單個背景svg圖像來追蹤所需的形狀，就像只使用帶有背景圖像的較大div一樣。

來源

2013-08-26 09:19:17

謝謝埃裏克。是的，它不僅僅是一個SVG問題。發佈後，我嘗試了一個gif並得到了類似的結果。儘管如此，在SVG中，結果更加令人討厭，因爲它會在背景的四面創建這些邊緣。使用gif時，透明部分會像背景一樣合併，抗鋸齒效果只會出現在提交的部分。 – lrpckr

我已經決定使用a：之前的僞類絕對定位在頂部：-1px和左：1px，所以空白邊留在我的佈局的白色部分的頂部。我將等待在標記此帖後回答是否出現其他答案。我認爲這是一個錯誤，但我不知道應該在哪裏存檔（chrome，firefox或android開發人員論壇？）。 – lrpckr

在Android瀏覽器上的SVG渲染

回答

相關問題