Chrome浏览器的模糊SVG图像

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

Android版Chrome似乎呈现内联SVG就好了，但如果SVG

在CSS中使用background-image和正常的URL
是在CSS中使用background-image和数据URI失败
使用与image元素

股票浏览器的Android 4.0的作品就好了。（以及我试过的所有其他手机）

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

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

来源

2012-11-19 Andreas

嗯怪异，只有直列svg元素是尖锐的。 – RvdK

很好的了解，所以它不是我的眼睛:) – Andreas

我有一个问题，我的Nexus 7的所有SVG的外观精致除了在蓝色背景的会议标题。它模糊到它看起来像白色阴霾。 http://summit.usu.edu/这是一个img元素。什么是“内联svg”？ – Leeish

如果你插入一个SVG文件，该文件将会被预渲染（取决于主机，例如维基百科）。因此，在加载时，图像将呈现给定的大小。内联SVG（直接编码到页面）将在页面重新调整大小时重新调整大小。但是，我不确定移动浏览器，因为它们不会调整页面中的元素，他们只是“缩放”，因此基本上你在绘制SVG到Canvas（双关语！），然后放大画布。内嵌有直接SVG ......这样更好....

来源

2013-02-22 03:30:55 Webb

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

当SVG被渲染的图像（或背景图片），它最初被渲染到CSS像素密度，使得它在包含大多数高端Android手机的1 CSS px！= 1设备px的设备上模糊不清。

这个问题被固定在Chrome 25（当前版本在写作时），但是图像变得模糊，又为你放大的口中。

此问题已在Chrome 26（目前Chrome测试版，可在Play商店中），SVG图像和背景保持清晰。

来源

2013-03-22 15:54:01

+1 - “它最初被渲染到CSS的像素密度，使其成为模糊的设备，其中1个CSS像素= 1个装置PX！”。很好的解释;这正是我看到的行为，导致图像看起来比光栅图形（PNG，JPEG，BMP等）更糟糕。 –

正如其他答案已经指出，在这个问题和其他类似的问题SVG的渲染是有问题的铬和本地安卓网络浏览器。这是一个已知的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上测试的浏览器上）无论如何使用背景图像元素，旋转，固定位置等都可以工作。甚至在缩放下似乎也很清楚。

享受！

来源

2013-04-18 06:46:08 gben

这正是解决方案！就像一个魔术。另一件事，我有我的离子应用程序snap.svg库。该动画也不适用于Android。 SVG现在已经清除您的黑客的B/C。但动画仍然没有显示... –

没有工作在我的android v4.4.4 chrome v50.0 – raghavsood33

对于我来说，虽然它解决了一个很长的发现是我的元素的CSS：

border-radius: 4px;

这个固定我的问题，但我一直无法重新创建了比网站我有一直在努力，但这里是我试图重新在移动设备上的问题的小提琴：

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

祝你好运，我的建议检查是否存在可能影响该元素的绘图类。

来源

2017-02-15 16:49:35

Chrome浏览器的模糊SVG图像

回答

相关问题