22

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

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

  • 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

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.

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

4

5 回答 5

14

正如其他答案在这个问题和其他类似问题中指出的那样，SVG 的渲染在 chrome 和本机 android 网络浏览器中存在问题。这是一个已知的 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>

在不调查实际的 chrome 源或进程的情况下，我只能假设通过嵌入文本，它会强制 SVG 在放大时针对高 dpi 设备进行重新渲染。

无论背景图像元素如何使用、旋转、固定位置等，这个解决方案（在我已经能够在 Android/Chrome 上测试的浏览器上）都可以工作。甚至在缩放下似乎很清晰。

享受！

于 2013-04-18T06:46:08.383 回答
10

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

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

该问题已在 Chrome 25（撰写本文时的当前版本）中修复，但是当您放大视口时，图像再次变得模糊。

此问题已在 Chrome 26（当前为 Chrome Beta，可在 Play 商店中获得）中修复，SVG 图像和背景仍然清晰。

于 2013-03-22T15:54:01.647 回答
1

对我来说，我花了很长时间才发现的解决方案是我的元素 css：

border-radius: 4px;

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

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

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

于 2017-02-15T16:49:35.837 回答
0

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

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

于 2013-02-22T03:30:55.263 回答
0

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

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

通过删除 filter 属性，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>
于 2021-01-27T16:21:18.740 回答