Verschwommene SVG-Bilder in Chrom für Android

Um der Hölle der unterschiedlichen Pixeldichten in Mobiltelefonen zu entkommen, verwende ich SVG-Dateien als Hintergrundbilder in meinem CSS.Verschwommene SVG-Bilder in Chrom für Android

Chrome für Android scheint Inline-svg einfach gut zu machen, nicht aber, wenn der svg

mit background-image und einer normalen URL in CSS verwendet wird
mit background-image und einem Daten uri in CSS verwendet wird
ist mit einem image Element

Die Lager-Browser von android 4 funktioniert gut verwendet. (Und alle anderen Mobiltelefone habe ich versucht, auch)

Sie this fiddle besuchen und check it out. Vergrößern, um den Unterschied zu sehen.

Jeder weiß, warum Chrom einige vorgerenderter Bitmaps hier verwendet?

Quelle

2012-11-19 Andreas

Hmm komisch, nur das Inline-SVG-Element ist scharf. – RvdK

gut zu wissen, so sind es nicht meine Augen :) – Andreas

Ich habe ein Problem auf meinem Nexus 7 alle SVG sehen gut aus außer dem Konferenztitel auf dem blauen Hintergrund. Es ist so verschwommen, dass es nur wie weißer Nebel aussieht. http://summit.usu.edu/ Es ist ein IMG-Element. Was ist "Inline-Svg"? – Leeish

Wenn Sie eine SVG-Datei einfügen, wird die Datei (je nach Host, Wikipedia zum Beispiel) vorgerenderten sein. Daher wird das Bild beim Laden für die angegebene Größe gerendert. Inline-SVG (Direkt in Seite Coded) wird die Größe neu, wenn die Seite neu Größen. Aber ich bin mir nicht sicher über mobile Browser, da sie die Elemente auf der Seite nicht verändern, sie "zoomen" einfach

Also im Grunde, was Sie tun, ist ein SVG auf einem Canvas (Wortspiel!) Dann zu malen Zoomen einer Leinwand. Inline hat die direkte SVG ... so besser ....

Quelle

2013-02-22 03:30:55 Webb

Dies ist ein bekanntes Problem https://code.google.com/p/chromium/issues/detail?id=161982

Wenn SVG gerendert wurde als Bild (oder Hintergrundbild) wurde ursprünglich gerendert CSS Pixeldichte, so dass es verschwommen auf Geräte, bei denen 1 CSS px! = 1 Gerät px, die meisten High-End-Android-Handys umfasst.

wurde Das Problem in Chrome 25 (aktuelle Version zum Zeitpunkt des Schreibens) festgelegt, aber die Bilder wieder verschwommen, wie Sie das Ansichtsfenster in vergrößern oder verkleinern.

Dieses Problem wird in Chrome 26 (derzeit Chrome Beta, verfügbar fixiert ist im Play Store) bleiben SVG-Bilder und Hintergründe scharf.

Quelle

2013-03-22 15:54:01

+1 - "es wurde ursprünglich auf CSS-Pixeldichte gerendert, so dass es auf Geräten mit 1 CSS px! = 1 Gerät px unscharf wird". Gute Erklärung; Das ist genau das Verhalten, das ich sehe, was zu einem Bild führt, das viel schlechter aussieht als eine Rastergrafik (PNG, JPEG, BMP usw.). –

Wie andere Antworten in dieser Ausgabe und anderen ähnlichen Problemen hingewiesen haben, ist das Rendering von SVG in Chrome und dem nativen Android-Webbrowser problematisch. Es ist ein bekanntes Chrome/natives Browser-Problem.

Nachdem ich einige Tage lang mehrere Lösungen betrachtet hatte, stolperte ich zufällig über diese Problemumgehung. Der Trick ist, den Text innerhalb des SVG-Datei eingebettet werden, diese einzelnen transparenten Charakter sein kann.

Zum Beispiel, fügen Sie diese (oder ähnlich) zu Ihren SVG-Dateien.

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

Ohne die tatsächliche Chromquelle oder Prozesse zu untersuchen gehe ich davon aus, dass nur Text durch Einbetten es die SVG zwingt für die hohe dpi-Geräte auf Scale-up neu gerendert werden.

Diese Lösung (auf den Browsern, die ich auf Android/Chrome testen konnte) funktioniert, egal wie das Hintergrundbildelement verwendet wird, Rotationen, feste Position usw.Und scheint unter Zoom sogar klar zu sein.

Viel Spaß!

Quelle

2013-04-18 06:46:08 gben

Das ist genau die Lösung! Wie eine Magie. Eine andere Sache, ich habe snap.svg Bibliothek auf meiner Ionic App. Die Animation funktioniert auch nicht auf dem Android. Das SVG ist jetzt b/c deines Hacks klar. Aber die Animation immer noch nicht angezeigt ... –

nicht auf meinem Android v4.4.4 Chrome V50.0 gearbeitet – raghavsood33

Für mich ist die Lösung, während es dauerte eine sehr lange war meine Elemente css zu entdecken:

border-radius: 4px;

Das ist meine Probleme behoben, aber ich habe nicht in der Lage gewesen, es neu zu erstellen über als auf der Seite, die ich habe gearbeitet, aber hier ist die Geige, die ich das Problem auf mobilen nachzubilden versuchte:

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

Viel Glück, mein Rat prüfen, ob es eine Klasse, die die Zeichnung des Elements werden beeinflussen könnten.

Quelle

2017-02-15 16:49:35

Verschwommene SVG-Bilder in Chrom für Android

Antwort

Verwandte Themen