Chrome：Retina 显示屏上的 SVG 背景图像答案

【问题标题】：Chrome: SVG background-image on Retina displayChrome：Retina 显示屏上的 SVG 背景图像
【发布时间】：2014-11-30 18:28:47
【问题描述】：

问题：通过 <img> 或 <embed> 加载的 SVG 在 Retina 设备上正确渲染（即每单位高像素），但是，当通过 CSS background-image 属性加载相同的 SVG 文件时，它会被渲染很差（好像没有考虑设备分辨率）。

有没有机会让我的浏览器在像素密度更高的设备上正确呈现 SVG？通过background-size 减小图像大小不起作用；像transform: translateZ(0) 这样的黑客也不起作用。

更新：此问题似乎特定于 Chrome 39 及更早版本。

【问题讨论】：

当然，好像是 Chrome 39 特有的。抱歉我之前没有说明。
请在crbug.com 提交错误报告并附上完整的测试用例。您是否测试过它在以后的版本中是否可以正常工作？
它在 Chrome Canary 中似乎可以正常工作。

标签： css svg retina-display

【解决方案1】：

我做了一些测试，它似乎只在我应用边框时看起来很糟糕。

带边框：1px 实心 #555：

无边框：

这是我的测试代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">

    div {
      background-image: url('search.svg');
      width: 38px;
      height: 38px;
      border: 1px solid #555;
    }

  </style>
</head>
<body>

  <div></div>

</body>
</html>

编辑：另外，如果元素尺寸大于 svg 文件中指定的宽度和高度，图像将被像素化。使用背景尺寸：包含；只要长宽比相同，似乎就可以解决这个问题。

编辑 2： 原来背景重复也会影响渲染。将其设置为“无重复”通常会使它看起来正确。

【讨论】：