在Chrome中缩放后，SVG图案内部的图像变得模糊

Question

我在svg内部使用了矩形(rect)，并且该矩形填充了一些图案。这个图案只是一个png图片。在FireFox、Safari等浏览器中，缩放这个矩形效果非常好，但在Chrome和Chromium中却不行。Chrome会使这个图像稍微模糊一点。我正在寻找类似的问题，但我需要svg、rect、pattern的宽度和高度都为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中它们非常清晰和漂亮。

是否有解决方法，因为我正在尝试解决这个问题。如果能得到帮助，我将非常高兴。提前致谢。

- Krzysztof Lewko

---

你的图像标签中没有链接。请问是否可以将出现问题的图像添加到 fiddle 中？ - Michael Mullany

@MichaelMullany 谢谢，由于某种原因它从服务器上消失了，现在我已经重新上传到imgur。 - Krzysztof Lewko

这是由于 webkit 抗锯齿 bug 导致的，当转换图像、文本或背景图像时影响 CSS 变换。只要保持缩放比例在 1 及以下，就不会出现这个问题。所以不要超过缩放因子 1。当图像被缩放到 1 以上时，在元素被绘制和渲染成合成层后会发生变化。SVG 不能使用 3D 变换，只能使用 2D 变换，所以我认为这只是一个 webkit 的 bug，而不是 GPU 的问题。 - Jonathan Marzullo

Answer 1

我最好的猜测是Chrome使用GPU进行缩放，因此它不会重新栅格化jpg，而只是在缩放资产时进行像素插值。据我所知，没有可靠的方法可以强制Chrome重新栅格化，但您可以尝试添加一个不能在GPU上执行的过渡/动画（不是比例/扭曲/位置变换或不透明度）。

- Michael Mullany