Ich habe ein SVG, das überwiegend aus Text besteht.
Es wird in Firefox 53 und Chrome 58 unter Windows 7 identisch (und korrekt) gerendert.
Es wird in Firefox Mobile 53 und Chrome Mobile 58 unter Android 6 identisch (aber falsch) gerendert.
Das falsche Rendering hängt mit dem Abstand zusammen - zwei Nicht-Text-Elemente sind falsch positioniert und ein Nicht-Text-Element ist breiter als es sein sollte.
Ich nehme an, dass die Schriftart anders rendert - aber würde Arial auf Android 6 anders als Arial auf Windows 7 rendern?
Hier ist mein SVG:
Was muss ich explizit in meinem XML deklarieren, damit das SVG identisch zwischen Desktop und Mobile rendert? Danke.
Es ist besser, Text in Pfadinterpretation zu konvertieren (nicht nur für SVG, sondern für jedes Designelement; eine grundlegende Empfehlung von Corel / A.Illustrator).
Zusätzliche Möglichkeit besteht darin, erforderliche Schriftarten zu importieren (indem Sie Google Fonts oder interne Dateien in der Gruppe woff / woff2 / eot / ttf / svg verwenden). Bitte beachten Sie, dass die aktuelle Lösung nur für <object> oder inline-svg (nicht funktionsfähig für <img> ) funktioniert:
Ich bin nicht sicher über Android, aber auf den meisten Linux-Distributionen ist Arial nicht out of the box, es ist wirklich viel besser, nur die gleiche Schriftfamilie zu verwenden, und wenn Sie auf die gleiche Art des Renderns angewiesen sind wandle den Text in den Pfad um, wie es @FieryCat vorgeschlagen hat (und füge den echten Text als alt-Test ein)
Tags und Links android svg google-chrome text firefox