我的任务是解决公司 Web 应用程序中的一个问题，该问题涉及使用 D3 库生成的 SVG 图形。目前的问题是图表最初显示良好；然而，当使用 iPad 或其他 iOS 设备查看并且用户放大图表时，它们很快就会出现锯齿/“模糊” - 如果可能的话，我希望防止这种质量损失。
您可以在此处查看问题示例:normal graph , zoomed graph
我以前从未使用过 SVG 或 D3，并且我不确定它们是否提供了处理此类事情的任何选项；如果有的话，我在我读过的任何文档中都找不到它们。
我感觉这可能是 iOS 缩放方法的产物，除了 try catch 缩放事件并以所需的放大级别触发图形的重新渲染之外，我可能对此无能为力，尽管我不确定这是否可能。
如果有人对我如何解决这个问题有一些建议，我将非常感激。
最佳答案
iOS 上的默认缩放行为在缩放时使用固定分辨率纹理；这称为硬件加速缩放。因此，如果您使用两根手指放大页面的一小部分，则图形在缩放时可能会暂时出现像素化。任何页面都是如此，因此许多 iOS 用户可能已经习惯了。
SVG 作为一种矢量图形格式，它的好处是，只要您松开手指，浏览器就会以新的分辨率重新渲染 SVG。
如果您想在缩放时保持清晰的分辨率，则需要禁用 native 硬件加速缩放，而是重新渲染图形以响应触摸事件。您可以使用 d3.behavior.zoom 向可视化添加平移和缩放交互。但请注意，根据可视化的复杂性，这可能比硬件加速缩放慢。
下面是一个将 d3.behavior.zoom 与 d3.geo.path 结合起来演示该技术的示例:http://bl.ocks.org/2374239 .
关于javascript - 防止在 iOS 设备上缩放时出现锯齿 SVG 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10129989/