未知のしきい値を超えたSVGをスケーリングすると、要素が消えます

Question

私は優れたsvg overlay pluginのopenseadragonを使用しています。

Chromeの場合、アプリは正常に動作します。ユーザーは、SVGでレンダリングされた表が完全に表示されるまでタップして拡大表示できます。

Here's the link to the demo。縮小してテーブルのSVGバージョンが表示され、ファジーラスタバージョンの背景がオーバーレイされます。

iOSまたはOSXのSafariでは、一見して任意のしきい値を超えてズームすると、テーブルやそのすべてが消えていきます。消失点は私が理解していない他の要因に依存するように見えるため、この洞察のための質問です。たとえば、尺度変換が正確に51201（51200で円がある）の場合、two.jsで描かれたオレンジ色の円は消えます。 複雑なテーブルSVGの場合、テーブル上の要素は〜23000〜50000の間でさまざまなスケールレベルで消えます。時々消えてからわずかにズームインすると再び表示されます。ズーム時に消えてから私は、ビューポートの端に近づいているオブジェクトの周りをパンします。

IE 11は非常に似た問題を抱えています。

誰もこれを前にやったことがあったのですか？

Answer 1

これは本当に滑らかなプロジェクトです！

私の経験では、SVGが消えるこの種の問題は、極端なズームに関係しています。良いことは、ビューポートの座標を変更することで回避できるはずだということです。デフォルトでは、画像の幅は1のビューポート値ですが、画像を幅10,000に設定することもできますが、これは画面上でまったく同じに見えますが、SVGが大きくズームアウトしていると考えていることを意味しますまず、ズームインすると、さらに多くのことができます。

two.jsを使用している場合は、キャンバスレンダリングに切り替えてhttps://github.com/altert/OpenSeadragonCanvasOverlayを使用してください。

Btw、完了したらプロジェクトを共有したいです...準備が整ったらhttps://github.com/openseadragon/site-build/issuesでチケットを申請してください。http://openseadragon.github.io/examples/in-the-wild/に追加できます。