Javascript 使用canvas或WebGL以高FPS平移和缩放许多SVG图像

我的应用程序需要在屏幕上绘制成百上千的图像，以及一些连接它们的原始形状，如圆和线。我的应用程序主要关注的是，我将能够在高FPS下快速平移和缩放，与谷歌地图类应用程序的体验类似

因为我希望我的图像在缩放时看起来清晰，所以我使用SVG创建了我的图标，以便在缩放后它们不会被像素化

我当前的实现使用d3和DOM来显示所有内容。它工作得很好，但随着DOM节点数量的增加，FPS会下降，缩放也会变慢

据我所知，我的选项是使用更好的渲染器，如canvas或WebGL。我的问题是，这些渲染器不支持svg缩放，因此即使我使用ctx.drawImage（）绘制图像，缩放后的图像看起来也很糟糕

我试着查看一些库，比如PIXI.js、three.js等等，但似乎没有提供这种功能

---

如何使用现代渲染器，同时在缩放后保持图标的清晰度？

d3 v4的模块d3 shape和d3 zoom提供了对缩放和渲染到画布的良好支持。像在大多数其他情况下，提供一个工作演示来说明您的问题将是一个伟大的帮助获得帮助！例如，谷歌地图依赖于带宽。根据需要以与显示和当前缩放匹配的分辨率加载大多数图像内容，其他层是实时（或静态）生成的2D网格对象（类似于3D网格，但不带z）。谷歌拥有巨大数据存储的优势，因此可以以多种分辨率存储所有内容。为了得到同样的结果，你需要做同样的事情。有很多应用程序可以将SVG转换为您想要的任何格式，包括webGL就绪的2D网格对象，但网格也需要匹配分辨率以保持帧速率。“距离场”技术可能适合您。webgl中有几个实现。