适用于Android的chrome中的模糊SVG图像

Question

为了逃避手机中不同像素密度的地狱,我在我的CSS中使用SVG文件作为背景图像.

Chrome for android似乎渲染inline-svg就好了,但是如果svg失败了

android 4的股票浏览器工作得很好.(以及我试过的所有其他手机)

你可以访问这个小提琴并检查出来.放大以查看差异.

任何人都知道为什么chrome在这里使用一些预先渲染的位图？

Answer 1

正如其他答案在本期和其他类似问题中指出的那样,SVG的渲染在chrome和原生的android web浏览器中存在问题.这是一个已知的chrome/native浏览器问题.

在看了很多天的解决方案之后,我偶然发现了这种解决方法.诀窍是在SVG文件中嵌入文本,这可以是单个透明字符.

例如,将此(或类似)添加到SVG文件中.

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

在不调查实际的铬源或过程的情况下,我只能假设通过嵌入文本来强制SVG在高dpi设备的放大时重新渲染.

无论背景图像元素如何使用,旋转,固定位置等,此解决方案(在我已经能够在Android/Chrome上测试的浏览器上)都能正常工作.甚至在缩放下看起来也很清晰.

请享用!

Answer 2

当SVG被渲染为图像(或背景图像)时,它最初被渲染为CSS像素密度,使其在1个CSS px!= 1个设备px(包括大多数高端Android手机)的设备上变得模糊.

这个问题在Chrome 25(编写本文时的当前版本)中已得到修复,但在缩放视口时,图像会再次模糊.

此问题已在Chrome 26(目前是Chrome Beta,在Play商店中提供)中修复,SVG图像和背景仍然清晰.

Answer 3

如果您要插入 SVG 文件，该文件将被预渲染（取决于主机，例如维基百科）。因此，在加载时，图像将呈现给定的大小。内联 SVG（直接编码到页面中）将在页面调整大小时调整大小。但是，我不确定移动浏览器，因为它们不会调整页面中元素的大小，它们只是“缩放”

所以基本上你要做的就是将 SVG 绘制到画布上（双关语！），然后缩放画布。Inline 有直接的 SVG...所以更好...