缩放 SVG 超过未知阈值会导致元素消失

Question

我正在使用openseadragon 和优秀的svg overlay plugin。

在 Chrome 上，该应用的行为与预期一致：用户可以点击放大，直到以 SVG 呈现的表格完全可见，表格上的注释清晰可见。

Here's the link to the demo。缩小以查看表格的 SVG 版本，覆盖背景的模糊光栅版本。

在 iOS 或 OSX 上的 Safari 上，当缩放超过看似任意的阈值时，表格及其上的所有内容都开始消失。消失点似乎取决于我不理解的其他因素，因此这个问题需要洞察力。例如，使用 two.js 绘制的橙色圆圈会在比例变换正好为 51201 时消失（在 51200 处圆圈就在那里）。 对于更复杂的表格 SVG，表格上的元素会以不同的比例级别消失，大约在 23000 到 50000 之间。有时它们会在稍微放大后消失然后重新出现。有时它们会在缩放时消失，然后当我平移时重新出现，靠近视口边缘的对象。

IE 11 有一个非常相似的问题。

有没有人处理过或解决过这个问题？

Answer 1

这是一个非常巧妙的项目！

根据我的经验，SVG 消失的这种问题与过度缩放有关。好消息是您应该能够通过更改视口坐标来解决它。默认情况下，图像的宽度是视口值 1，但您可以将图像设置为 10,000 或类似的宽度，这在屏幕上看起来完全一样，但这意味着 SVG 认为它被缩小了很多起初，所以当您放大时，您可以走得更远。

如果您使用 two.js，另一个可能的解决方法是切换到画布渲染并使用 https://github.com/altert/OpenSeadragonCanvasOverlay。

顺便说一句，我很乐意在您完成项目后分享您的项目...请在您准备好后在 https://github.com/openseadragon/site-build/issues 提交工单，我们可以将其添加到 http://openseadragon.github.io/examples/in-the-wild/。