放大 Chrome 后，svg 图案内的图像模糊答案

【问题标题】：Image inside svg pattern is blurried after zoom in Chrome放大 Chrome 后，svg 图案内的图像模糊
【发布时间】：2016-03-15 07:58:41
【问题描述】：

我在 svg 中有 rect，并且 rect 充满了一些模式。此图案只是 png 图像。缩放这个矩形在 FireFox、Safari 等中非常棒，但在 Chrome 和 Chromium 中却不行。 Chrome 使这张图片有点模糊。我正在寻找类似的问题，但我需要 svg、rect、pattern 为 100% 的宽度和高度……它们需要是容器大小的 100%，而不是某个固定大小。我创建了fiddle来看看效果：http://jsfiddle.net/j5gfjnpd/2/

<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <defs>
      <pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
      <image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
      </pattern>
    </defs>
    <g id="mapZoom">
    <rect width="100%" height="100%" fill="url(#floor)">   
    </rect>

    </g>
  </g>
</svg>
</div>

要查看此效果，您必须缩放图像并搜索一些小标题。在 Chrome 中它们是模糊的，而在 FireFox 中它们非常干净漂亮。

是否有一些解决方法，因为我正在努力解决这个问题。我会很高兴看到一些帮助。提前致谢

【问题讨论】：

您的图片标签中没有链接。您能否将有问题的图像添加到小提琴中。
@MichaelMullany 谢谢，由于某种原因它从服务器上消失了，现在我将它重新上传到 imgur
这是由于webkit 抗锯齿错误导致在转换图像、文本或背景图像时影响 CSS 转换。当您保持比例 1 及以下时，此错误不会显示其丑陋的头部。所以不要超过1的比例因子。当图像缩放到1 以上时，它会在元素被绘制并渲染到合成层后发生变化。 SVG 不能使用 3D 变换，只能使用 2D 变换，所以由于 GPU 的原因我看不到这一点，而只是一个 webkit 错误。

标签： google-chrome svg

【解决方案1】：

我最好的猜测是 Chrome 正在 GPU 上进行缩放，在这种情况下，它不会重新光栅化 jpg，它只是在缩放资产时进行像素插值。 AFAIK，没有可靠的方法可以让 Chrome 重新光栅化，但是您可以尝试通过添加无法在 GPU 上执行的过渡/动画来实现（不是缩放/倾斜/位置变换或不透明度） .

【讨论】：