放大Chrome后，svg模式中的图像模糊不清 [英] Image inside svg pattern is blurried after zoom in Chrome

问题描述

我在svg里面有rect，rect里面充满了一些模式。这种模式只是PNG图像。在FireFox，Safari等中放大这一效果非常棒，但在Chrome和Chromium中却没有。 Chrome使这个图像有点模糊。我正在寻找类似的问题，但我需要svg，rect，图案为100％的宽度和高度......这是他们需要100％的容器大小，而不是一些固定的大小。我创建了小提琴以查看效果： http://jsfiddle.net/j5gfjnpd/2/

I'm having rect inside svg and rect is filled with some pattern. This pattern is just png image. Zooming this rect work fantastic in FireFox, Safari etc, but not in Chrome and Chromium. Chrome is making this image a little bit blurry. I was searching for similiar problems, but i need svg, rect, pattern to be 100% width and height... it is they need to be 100% of container size and not some fixed size. I created fiddle to see the effect: 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中它们非常干净漂亮。

To see this effect you have to zoom-scroll the image and search for some small captions. In Chrome they are blurried and in FireFox they are really clean and nice.

是否有一些解决办法，因为我正在努力解决这个问题。我会很高兴看到一些帮助。在此先感谢

Is there some fix to this, because i'm losing my head trying to fix this. I will be really happy to see some help. Thanks in advance

推荐答案

我最好的猜测是Chrome的缩放是由GPU完成的，在这种情况下，它不是重新栅格化jpg，它只是在缩放资源时进行像素插值。 AFAIK，没有可靠的方法来启动Chrome重新栅格化，但您可以尝试添加无法在GPU上执行的转换/动画（这不是一种比例/倾斜/位置转换或不透明度） 。

My best guess is that the zoom is being done on the GPU by Chrome, in which case, it's not re-rasterizing the jpg, it's just doing pixel interpolation when it scales the asset. AFAIK, there is no reliable way to kick Chrome to re-rasterize, but you can try doing it by adding a transition/animation that can't be performed on the GPU (something that's not a scale/skew/position transform or opacity).

这篇关于放大Chrome后，svg模式中的图像模糊不清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！