同個頁面上多個 inline SVG 顯示相互影響,以及 display: none 的顯示問題

Standard

在製作網頁上我們經常選擇 SVG 格式來處理向量圖片的顯示,它擁有清晰、能夠放大縮小、可動態修改等好處。近日工作上同事遇到一個有趣的 SVG 相關 issue,想起剛好我過去也曾經遇過類似的問題,發現之前沒有筆記下來,雖然只是個很小的東西,還是決定整理成文章,方便日後回憶。

情境 1 – 錯置的 linearGradient 定義

假設我們有 2 個不同的漸層 SVG icon,以 inline 的方式放置在同一個網頁上:

Continue reading

在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

Standard

最近在執行的手機版網頁專案,針對其中許多 icons,我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片,銳利的向量圖片放大縮小也不怕,真棒。

但在進行不同裝置的測試時,發現在某些 Android 上用原生瀏覽器瀏覽時,某些 SVG 圖片特別模糊,毛邊都相當明顯,但又不是每張 SVG 圖片都是如此,相當詭異。

舉個例子:


(可點圖放大)

  • 左方是正常的情況,SVG 圖檔相當清晰
    (Chrome for Android v36)
  • 右方則是在 Android 原生瀏覽器上的情況
    可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現,在我這個專案的情境中,只有被套上 transform: rotateposition: fixed,且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看,果然有類似的問題被提出(雖然提問者的情境與我不同),而也有人提出了 workaround 來暫時解決這個問題。

根據討論串,這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue,這個 issue 會使符合上述情境的 SVG 圖片,以 CSS 像素的密度(density)被繪製出來,但多數高階 Android 手機中,CSS 的 1px 並不等於裝置的 1px,所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋,但也滿有意思的,是在 SVG 檔案中嵌入一個透明(opacity=0)的文字物件:

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片,就連 zoom in 也一樣清楚噢。