Question

问题：通过<img>或<embed>加载的SVG在Retina设备上正确呈现（即每单位像素高），但是，当通过CSS加载相同的SVG文件时{{1}它被渲染得很差（似乎没有考虑设备分辨率）。

我是否有机会在具有更高像素密度的设备上使用我的浏览器进行正确的SVG渲染？通过background-image缩小图片尺寸并不起作用;像background-size这样的黑客也没有工作。

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

Answer 1

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

带边框：1px solid＃555：

Border

没有边框：

No norder

这是我的测试代码：

<!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文件中指定的宽度和高度，则图像将变为像素化。使用background-size：contains;只要纵横比相同，似乎就解决了这个问题。

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

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

1 个答案: