将SVG缩放到未知阈值会导致元素消失

Question

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

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

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

在iOS或OSX上的Safari上，当超过一个看似任意的阈值时，表格及其上的所有内容都会消失。消失点似乎取决于我不理解的其他因素，因此这个问题需要深刻见解。例如，当缩放变换精确为51201时（在51200圆圈处），用two.js绘制的橙色圆圈将消失。 对于更复杂的表格SVG，表格中的元素将在不同的比例级别消失，在~23000到50000之间。有时它们会消失，然后在轻微放大后重新出现。有时候它们会出现。 ll在变焦时消失，然后在我平移时重新出现，这些物体靠近视口的边缘。

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/。