Android için krom içinde bulanık SVG görüntüleri

Question

---

Cep telefonlarında farklı piksel yoğunluklarının cehenneminden kaçmak için SVG dosyalarını css'mdeki arkaplan görüntüleri olarak kullanıyorum. android için

Krom gayet inline-svg hale görünüyor, ama svg

• background-image ve
• background-image ile css kullanılan normal bir url ve bir veri uri ile css kullanılması durumunda başarısız
• bir image eleman

gayet android 4 eserlerin stok tarayıcısı ile kullanılır.

Sen this fiddle ziyaret etmek ve bunu kontrol edebilir (ve diğer tüm cep telefonları Ben de denedim). Farkı görmek için yakınlaştırın. krom burada bazı ön-işlenmiş bitmapleri kullanır neden

Herkes bilir?

Answer 1

Bir SVG dosyasını ekliyorsanız, dosya olacaktır (konak bağlı olarak örneğin Wikipedia) önceden işlenen. Dolayısıyla yükte, görüntü verilen boyut için işlenecektir. Sayfa yeniden boyutlandırıldığında Inline SVG (Doğrudan sayfaya kodlanmış) yeniden boyutlandırılacaktır. Ancak, sayfadaki öğeleri yeniden boyutlandırmadıkları için mobil tarayıcılar hakkında emin değilim, sadece "zumlamak"

Temelde yaptığınız şey bir Tuval üzerine bir SVG resim yapmaktır (pun!) bir tuvali yakınlaştırmak. Satır içi Bu bilinen bir sorundur

Answer 2

direkt SVG'yi ... öylesine iyi .... sahiptir https://code.google.com/p/chromium/issues/detail?id=161982 SVG bir görüntü (ya da arka plan görüntüsü) kılınmıştır

özgün hale CSS piksel yoğunluğuna hale getirildi En üst düzey Android telefonlarını içeren 1 CSS px! = 1 cihaz px cihazlarında bulanık.

Konu, ancak görseller Viewport'u yakınlaştıkça yine bulanık hale, Chrome 25 (yazma anda geçerli sürüm) giderilmiştir.

Bu sorun Chrome'da 26 (şu anda Chrome Beta sabittir, mevcut oyun deposunda), SVG görüntüleri ve arka planları keskin kalır. Diğer cevaplar bu konuda ve diğer benzeri konularda belirttiğimiz gibi

Answer 3

SVG en render krom ve yerli android web tarayıcısında problemlidir. Bu bilinen bir krom/yerel tarayıcı sorunudur.

gün sayısı boyunca birçok çözümlere baktıktan sonra Şans eseri bu çözüm üzerinde tökezledi. Hile SVG dosyasının içine metin gömmek, bu tek şeffaf karakter olabilir.

Örneğin, bunu (veya benzeri) SVG dosyalarınıza ekleyin.

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

gerçek krom kaynağı veya işlemleri araştıran olmadan ben yalnızca metin gömerek yüksek dpi cihazlar için ölçek-up yeniden işlenecek SVG'yi zorluyor varsayabiliriz.

(I Android/Chrome test etmek mümkün oldum tarayıcılarda) Bu çözüm olursa olsun Arka plan resim elemanı vb rotasyonları, sabit pozisyon nasıl kullanıldığını çalışır

Ve hatta zum altında net görünüyor.

Bu benim sorunlar giderildi

border-radius: 4px; 

, ancak ben var sitede daha ters yeniden edemedik: Benim için

Answer 4

, bunun ederken çözüm bulmak için çok uzun bir zaman unsurlar css oldu aldı elemanın çizimi etkiliyor olabilecek bir sınıf varsa

http://jsfiddle.net/rc8Hh/31/

İyi şanslar, benim tavsiye kontrolü: burada üzerinde çalışıyor ama edilmiştir Ben mobil sorunu yeniden çalışıyordu keman olduğunu.