我在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中它们非常清晰和漂亮。
是否有解决方法,因为我正在尝试解决这个问题。如果能得到帮助,我将非常高兴。提前致谢。
webkit
抗锯齿 bug 导致的,当转换图像、文本或背景图像时影响 CSS 变换。只要保持缩放比例在1
及以下,就不会出现这个问题。所以不要超过缩放因子1
。当图像被缩放到1
以上时,在元素被绘制和渲染成合成层后会发生变化。SVG 不能使用 3D 变换,只能使用 2D 变换,所以我认为这只是一个webkit
的 bug,而不是 GPU 的问题。 - Jonathan Marzullo