Skalierung von SVG nach unbekanntem Schwellenwert führt dazu, dass Elemente verschwinden

Question

Ich benutze openseadragon mit dem ausgezeichneten svg overlay plugin.

In Chrome verhält sich die App wie erwartet: Benutzer können tippen, um zu vergrößern, bis eine in SVG gerenderte Tabelle vollständig sichtbar ist, die Notiz auf der Tabelle ist lesbar.

Here's the link to the demo. Verkleinern Sie, um zu sehen, dass die SVG-Version der Tabelle angezeigt wird und die Fuzzy-Raster-Version des Hintergrunds überlagert wird.

Bei Safari auf iOS oder OSX, wenn Sie über einen scheinbar willkürlichen Schwellenwert hinaus zoomen, verschwinden die Tabelle und alles darauf. Der Punkt des Verschwindens scheint von anderen Faktoren abhängig zu sein, die ich nicht verstehe, daher diese Frage nach Einsicht. Zum Beispiel wird ein orangefarbener Kreis, der mit two.js gezeichnet wurde, verschwinden, wenn die Skalentransformation genau 51201 ist (bei 51200 ist der Kreis dort). Für die komplexere Tabelle SVG verschwinden Elemente auf der Tabelle in verschiedenen Skalierungsebenen zwischen ~ 23000 und 50000. Manchmal verschwinden sie und erscheinen dann wieder bei einem leichten Vergrößern. Manchmal verschwinden sie beim Zoomen und erscheinen dann wieder als Ich schwenke herum, die Objekte nähern sich dem Rand des Ansichtsfensters.

IE 11 hat ein sehr ähnliches Problem.

Hat sich jemand damit beschäftigt oder es gelöst?

Answer 1

Das ist ein wirklich glattes Projekt!

Meiner Erfahrung nach hat diese Art von Problem mit SVG verschwinden mit extremen Mengen von Zoom zu tun. Die gute Nachricht ist, dass Sie in der Lage sein sollten, es zu umgehen, indem Sie Ihre Ansichtsfensterkoordinaten ändern. Standardmäßig ist die Breite des Bilds ein Darstellungsfeldwert von 1, aber Sie können Ihr Bild auf eine Breite von 10.000 oder ähnlich einstellen, was auf dem Bildschirm genau gleich aussieht, aber es bedeutet, dass das SVG denkt, dass es stark herausgezoomt ist Zuerst, wenn Sie hineinzoomen, können Sie viel weiter gehen.

Wenn Sie two.js verwenden, können Sie auch auf Canvas-Rendering umschalten und https://github.com/altert/OpenSeadragonCanvasOverlay verwenden.

Btw, ich würde gerne Ihr Projekt teilen, wenn es fertig ist ... Bitte geben Sie ein Ticket bei https://github.com/openseadragon/site-build/issues, wenn Sie bereit sind, und wir können es http://openseadragon.github.io/examples/in-the-wild/ hinzufügen.