在镀铬模糊SVG图像为Android [英] Blurry SVG images in chrome for Android

问题描述

要逃手机不同的像素密度的地狱，我用我的CSS SVG-文件作为背景图片。

To escape the hell of different pixel densities in mobile phones, I use SVG-files as background images in my css.

Chrome浏览器Android版似乎呈现内联SVG就好了，但如果失败了SVG

Chrome for android seems to render inline-svg just fine, but fails if the svg

• 用在CSS与背景图像和正常的网址
• 用在CSS与背景图像和数据URI
• 在应用一个图片元素

• is used in css with background-image and a normal url
• is used in css with background-image and a data uri
• is used with an image element

Android的4件作品就好了股票的浏览器。 （和所有其他的手机我试过，太）

The stock browser of android 4 works just fine. (and all other mobile phones I tried, too)

您可以访问这个小提琴并检查出来。放大看区别。

You can visit this fiddle and check it out. Zoom in to see the difference.

任何人都知道为什么铬使用了一些pre-呈现位图吗？

Anyone knows why chrome uses some pre-rendered bitmaps here?

推荐答案

至于其他的答案已经指出，在这个问题上和其他类似问题SVG的渲染是有问题的Chrome和Android原生的Web浏览器。这是一个众所周知的铬/原生浏览器的问题。

As other answers have pointed out in this issue and other similar issues SVG's rendering is problematic in chrome and the native android web browser. It's a known chrome / native browser issue.

在寻找多种解决方案在数天，我无意中发现了这个解决办法是偶然的。关键是要嵌入SVG文件中的文本，这可能是一个透明的字符。

After looking at many solutions over a number of days I stumbled on this workaround by chance. The trick is to embed text inside the SVG file, this can be single transparent character.

例如，本（或类似）添加到您的SVG文件。

For Example, add this (or similar) to your SVG files.

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

在不调查实际铬源或过程我只能假设通过嵌入文本它迫使SVG到重新呈现在放大为高DPI设备

Without investigating the actual chrome source or processes I can only assume that by embedding text it is forcing the SVG to be re-rendered on scale-up for the high dpi devices.

该解决方案（在浏览器中我已经能够测试在Android / Chrome浏览器）的作品无论怎样的背景图像元素时，旋转，固定位置等，甚至似乎是在变焦清晰。

This solution (on the browsers I've been able to test on Android/Chrome) works no matter how the background-image element is used, rotations, fixed position etc. And even seems to be clear under zoom.

享受！

这篇关于在镀铬模糊SVG图像为Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！