在 iOS 设备上缩放时防止混叠 SVG 元素答案

【问题标题】：Prevent aliasing SVG element when zooming on iOS device在 iOS 设备上缩放时防止混叠 SVG 元素
【发布时间】：2012-04-25 04:15:52
【问题描述】：

我的任务是解决我公司的 Web 应用程序中的一个问题，该问题涉及使用 D3 库生成的 SVG 图形。眼前的问题是图表最初显示得很好。但是，当使用 iPad 或其他 iOS 设备查看并且用户放大图表时，它们很快就会变得混叠/“模糊” - 如果可能的话，我想防止这种质量损失。

您可以在此处查看问题示例：normal graph、zoomed graph

我以前从未使用过 SVG 或 D3，我不确定它们是否提供任何选项来处理此类事情；如果是这样，我无法在我阅读的任何文档中找到它们。

我感觉这可能是 iOS 缩放方法的产物，除了尝试捕捉缩放事件并以所需的放大倍率触发图形的重新渲染之外，它们可能无能为力，尽管我不确定这是否可能。

如果有人对我如何解决此问题有任何建议，我将不胜感激。

【问题讨论】：

【解决方案1】：

iOS 上的默认缩放行为在缩放时使用固定分辨率的纹理；这称为硬件加速缩放。因此，如果您使用两根手指截取页面的一小部分并放大，则图形可能会在缩放时出现暂时像素化。任何页面都是如此，因此许多 iOS 用户可能已经习惯了。

作为矢量图形格式的 SVG 的好处在于，只要您松开手指，浏览器就会以新的分辨率重新渲染 SVG。

如果您想在缩放时保持清晰的分辨率，您需要禁用原生硬件加速缩放，而是重新渲染图形以响应触摸事件。您可以使用 d3.behavior.zoom 向可视化添加平移和缩放交互。但是请注意，根据可视化的复杂程度，这可能比硬件加速缩放要慢。

这是一个结合 d3.behavior.zoom 和 d3.geo.path 来演示该技术的示例：http://bl.ocks.org/2374239。

【讨论】：