.svg在Chrome的特定縮放級別模糊圖像

我決定將我的網站標誌作爲svg，但它似乎並未在Chrome中很好地呈現。在100％的縮放水平下，它看起來很模糊，但如果我縮小几倍，那麼它看起來沒問題。下面是該網站我使用它：.svg在Chrome的特定縮放級別模糊圖像

www.confide.re/confide

有誰知道什麼可能導致這個問題以及如何解決它？謝謝

我在Illustrator CS5中製作了svg，如果有問題的話。

來源

2013-01-05 Taimur

有哪些？ –

您的標誌完美清晰，100％看起來不錯。如果不失去抗鋸齒功能或繪製位圖圖像，您就無法變得更好。 –

其原因是，使用百分比來設置元件的寬度的標誌是在（父元素）

這意味着標誌首先從矢量光柵化到內部位圖，它是100您爲圖片設置的大小的百分比。然後在你的#header css規則中，你使用80％作爲圖片所在的標題元素。

會發生什麼情況是瀏覽器用來保存光柵化矢量圖像的內部位圖從100％縮放到80％，而不是重新柵格化矢量。由於這涉及插值，會導致一些模糊的邊緣。這是瀏覽器爲父母內容所做的性能選擇。

解決方案是刪除標頭（父）元素的80％縮放比例。你可以添加一個新的規則並設置圖像寬度（你當然可以使用百分比代替 - 只要父元素不縮放，這不會是一個問題） - f.ex：

#header { 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
    /*width: 80%;*/ 
} 

.header-img { 
    width:200px; 
    height:auto; 
    }

然後在你的HTML代碼：

<img class="header-img" src="logo.svg" alt="" />

（你也能設置#header img {...}但這有性能損失）。

這裏是證明了概念（一個小的差異100％到80％，但可見 - 比較的最後一部分）：

使用100％光柵位圖通過瀏覽器縮放爲80％徽標尺寸：

enter image description here

從報頭（父）元件卸下80％，例如起見圖像寬度爲200像素：

enter image description here

來源

2013-01-05 12:07:13 K3N

謝謝，我希望它根據屏幕大小進行縮放（移動） - 有什麼方法可以使用px和％嗎？ – Taimur

我也用解決方案更新了我的答案。當然，請根據您的需要調整寬度 - 我只是在初始值時開始。 – K3N

+1挖掘CSS – PassKit

我不相信你的SVG有一個問題，因爲它是100％的矢量（沒有嵌入PNG的fies）。

最可能的原因是圖像尺寸相對較小，以及它在72 dpi（常規屏幕像素密度）下的呈現方式。字體的不規則邊緣正在像素化，導致圖像看起來有些模糊。

在高分辨率的MacBook Pro和iPhone視網膜上，您的標誌看起來很細膩。

它也可以放大。

enter image description here

來源

2013-01-05 12:00:44 PassKit

將這個代碼是利用Panzoom在頁面上：您嘗試縮放標籤：APIWinHTTP，看看發生了什麼

<style> 
     .panzoom { 
      -webkit-backface-visibility: initial !important; 
      -webkit-transform-origin: 50% 50%; 
     } 
</style>

來源

2016-01-20 14:22:26

這解決了我們的類似問題。謝謝！現在理解修復的原因會很好:)你碰巧知道嗎？ – Instine

對不起Instine，我不知道...我想知道... –

.svg在Chrome的特定縮放級別模糊圖像

回答

相關問題