Firefox ve Internet Explorer'da SVG'ler nasıl keskin yapılır?

Bir simgeyi görüntülemek için <svg> kullandığımda Google Chrome'da mükemmel ve keskin görünüyor. Ancak, Firefox veya Internet Explorer'da svg'yi açtığımda, simge bulanık görünüyor.Firefox ve Internet Explorer'da SVG'ler nasıl keskin yapılır?

Bu tarayıcılar simgeyi yarım piksel haline getiriyor gibi görünüyor. Burada sadece Google Chrome iyi bir iş yapıyor.

tüm tarayıcılarda gevrek svg simgeleri almak için en iyi yaklaşım nedir? CSS özelliği shape-rendering uyguladık :

Ben şimdiye kadar denedim ne

: (yani Arka plan resmi kullanarak ... ya piksel grafik hiçbir seçenek vardır Biz dolgu yoluyla simgeleri renklendirmek istiyorum). ama bu çok keskin ve sinirli. genişliği ve yüksekliği için

<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 
<svg width="32px" height="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 

 
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;"> 
 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg> 
 
</i></button> 
 

 

 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg>

kaynak

2016-02-23 Rebecca

Her bir koordinat için 0,5 ekleyin http://cairographics.org/FAQ/#sharp_lines –

Sorunuza dahil ettiğiniz snippet, ekran görüntüsünüzle eşleşmiyor. –

@RobertLongson Snippet * içindeki bu "dosya" simgeleri * piksel düzgün bir şekilde hizalanır, bu nedenle keskin olmaları gerekir. –

Hack:

svg { 
transform: translateZ(0); 
}

Ne IE hakkında: svg konteyner (piksel hattı üzerinde tam olarak değil) 31,5 gibi koordinatlarında konumlandırılan olası nedeni, IE bu kapta SVG aynı şekilde çekecek bir piksel çizgisi bitti.

kaynak

2016-03-03 08:13:46

Teşekkür ederiz! Bu geçici çözüm bir cazibe – Rebecca

gibi çalıştı. Hoşgeldin) Sadece neden böyle olduğunu tamamen anlıyorum. Nasıl çalıştığını anlarsam, cevabımı açıklığa kavuşturacağım –

kullanımı çok daha büyük değerler.

Şu anda ne yapıyorsunuz, 24 x 16 piksellik bir görüntüyü belirtiyor ve tam ekran boyutuna genişletiyor. SVG, sonsuz ölçeklenebilir olmalıdır, bu nedenle ad, ama bazı TV'ler gibi bazı tarayıcılar piksel interpolasyon daha iyidir. Firefox için

kaynak

2016-02-27 04:12:19

gibi pek çok örneğim var: www.irony-maiden.com/svg Arif –

Firefox ve Internet Explorer'da SVG'ler nasıl keskin yapılır?

cevap

İlgili konular