Question

我在svg里面有rect并且rect填充了一些模式。这种模式只是png图像。在FireFox，Safari等中缩放这个直接工作，但在Chrome和Chromium中则不然。 Chrome正在使这个图像有点模糊。我正在寻找类似的问题，但我需要svg，rect，pattern要100％的宽度和高度...它们需要100％的容器大小而不是一些固定的大小。我创造了小提琴来看效果：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中它们非常干净漂亮。

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

Answer 1

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

放大Chrome后，svg模式中的图像变得模糊

1 个答案: