缩放SVG是模糊的或像素化的，不清晰

Zooming SVG is blury or pixelated, not sharp

本文关键字：清晰 像素 SVG 模糊 缩放      更新时间：2023-09-26

我知道在某种程度上这是一个已知的问题，在这里已经被问到，但从来没有回答过，但我希望一些额外的见解。

我有一个简单的SVG图像在一个网页的div。我希望能够使用缩放手势缩放图像，并使SVG呈现清晰。在变焦过程中不需要清晰，但手势完成后应该清晰。

我在一台带有触摸显示器的Windows 8.1电脑、一台iPad和一台旧的Android Galaxy Tab上进行了测试。在主电脑上，我使用IE11和Chrome浏览器。对于处理触摸手势，我使用Hammer.js。我正在使用jQuery CSS()函数修改变换CSS来进行缩放(我正在设置scale3d和translate3d)。

IE11在我的电脑上完全像我想要的那样工作。它使SVG图像在整个缩放过程中保持清晰，并且无论我何时设置CSS，图像总是清晰的。

当我使用缩放放大时，我电脑上的Chrome总是渲染SVG块。在变焦过程中它是块状的，之后不会变得锋利。如果我在页面(x13)加载后添加缩放图像的调用，图像就会变得清晰。如果我使用setTimeout()调用来重置缩放，然后在缩放结束后重新缩放图像，则图像是清晰的。

在iPad和Android平板电脑上，无论我在代码中缩放它，SVG都不会清晰地呈现。

是否有人有任何想法，如何可靠地结束了一个尖锐的SVG渲染捏缩放完成后?有人有更好的解决方案吗?使用SVG viewBox在手势过程中缩放和平移并不能为我们更复杂的SVG图像提供足够好的性能。我想尝试使用硬件加速scale3d/translate3d在手势期间，然后尝试将其转换为新的SVG viewBox设置之后，但这是一个挑战，我不确定这是完成后，平移将正确工作。

刚刚尝试回答您的其他SVG问题，我将在这个问题上进行尝试。

Michael Mullany指出GPU翻译永远不会给你一个清晰的图像。这是因为GPU只是将一个像素数组映射到一个新的像素数组。因为它没有线或矩形的概念，所以分辨率是在GPU获得图像时设置的。CPU总是很难及时重新渲染以获得平滑的拖动。

是什么让一些浏览器产生一个清晰的图像，他们做了一些聪明的操作，比如渲染更多的像素，这样一些缩放可以在不损失分辨率的情况下发生。然而，这些是完全不一致的，不可能依赖。正如我所看到的"正确"解决方案是在缩放或缩放期间使用硬件加速转换进行翻译和缩放，然后在翻译完成时刷新没有css转换的视图框。需要克服的挑战是

  • css转换将使用屏幕坐标，但viewBox操作将使用SVG坐标系统。
  • 在屏幕tm和设备像素比中存在浏览器不一致
  • 限制，以便人们不会拖拽或缩放太远需要在两个系统中计算
  • 缩放中心点也需要在
    • 中计算
  • 为了进一步提高性能，css转换将被包装到requestAnimationFrame循环的更新中。

我的工作解决方案是锤头2。我首先关注的是台式机和安卓手机，这似乎对它们很有效。为了简化问题，缩放总是以屏幕中心为中心。然而，我做的事情这是目前唯一的解决方案之一。这里有一个有效的例子。

相关文章：