Question

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

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

则会失败

用于带background-image的css和普通网址
用于带有background-image的css和数据uri
与image元素

android 4的股票浏览器工作得很好。（以及我尝过的所有其他手机）

您可以访问this fiddle并查看。放大以查看差异。

有人知道为什么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

这是一个已知问题https://code.google.com/p/chromium/issues/detail?id=161982

当SVG呈现为图像（或背景图像）时，它最初呈现为CSS像素密度，使其在1 CSS px！= 1 device px（包括大多数高端Android手机）的设备上变得模糊。

此问题已在Chrome 25中解决（当前版本在撰写时），但在缩放视口时图像会再次模糊。

此问题已在Chrome 26（目前是Chrome Beta，在Play商店中提供）中修复，SVG图像和背景仍然清晰。

Answer 3

对我来说，解决方案需要很长时间才能发现我的元素css：

border-radius: 4px;

这解决了我的问题，但是我无法重新创建它而不是在我一直在努力的网站上，但这里是我试图在移动设备上重现问题的小提琴：

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

祝你好运，我的建议检查是否有可能影响元素绘制的类。

Answer 4

如果要插入SVG文件，则预渲染文件（取决于主机，例如维基百科）。因此，在加载时，图像将呈现给定的大小。当页面重新调整大小时，内联SVG（直接编入页面）将重新调整大小。但是，我不确定移动浏览器，因为他们没有调整页面中的元素大小，只是“缩放”</ p>

所以基本上你正在做的是将一个SVG绘制到Canvas（双关语！）然后缩放画布。内联有直接的SVG ...所以更好....

Answer 5

就我而言，我发现罪魁祸首是过滤器属性

<g filter="url(#filter0_d)">

通过移除过滤器属性，SVG 被渲染为矢量而不是位图。

<g>

为了更好的衡量，我也删除了 <filter> 标签

<filter id="filter0_d" x="-261" y="50" width="1490" height="950" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="12.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>

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

5 个答案: