SVG-PanZoom funktioniert nicht, wenn Container ausgeblendet wird

Question

Ich habe eine SVG-Pan-Zoom-Instanz in einer Tabbing-Komponente eingebettet. Wenn sich die aktive Registerkarte ändert, wird die vorherige mit ausgeblendet. Nach dem Zurückschalten auf die erste Registerkarte (die mit display: block erneut angezeigt wird) befindet sich die svgPanZoom-Instanz in einem unbrauchbaren Zustand. Ich verstehe nicht wirklich, was vor sich geht.

Ich konnte dieses Verhalten nur in Google Chrome reproduzieren.

Ich habe ein Beispiel zu testen, diese erstellt: http://svgpan-example.bitballoon.com/

Ist das ein Bug, oder ich bin etwas fehlt?

Answer 1

Es scheint eine browserspezifische Implementierung zu sein. Wenn Sie auf das Element embed (oder seinen übergeordneten Container) festlegen, wird die Ressource höchstwahrscheinlich vom Browser entladen. Nach dem Entfernen der - sieht es so aus, als ob der Browser die Ressource neu initialisiert/neu lädt. Sie können, dass basierend auf 2 Fakten sehen:

• im Network Registerkarten Developer Tools Sie sehen können, dass die Ressource wieder geladen wird, wenn Sie das Element zeigen
• Wenn Sie ein Element innerhalb von SVG (in Inspektor) ändern Nach dem Verstecken und Zeigen - die Veränderung ist weg.

svg-Pan-Zoom hat keine Kontrolle über SVG ändert sich von der Außenwelt, es ist so kein Problem. Eine Lösung ist die Verwendung von Inline-SVG (sie funktionierten für mich beim Ausblenden/Anzeigen) oder einfach alle anderen Optionen (Objekt- und Img-Tags). Aber ein Inline-SVG ist immer die bevorzugte Methode.

Answer 2

Ein Objekt mit display: hidden wird aus dem Fluss des DOM entfernt und hat daher in einigen Browsern zu diesem Zeitpunkt keine dimensionalen Daten (Breite, Höhe). Meine Lösung mag etwas heikel sein, aber ... Ich brauchte ein SVG in einem Bootstrap-Modal. Also lege ich das SVG-Element in den unteren Teil des Körpers außerhalb des Modals, setze die Sichtbarkeit: versteckt. Dann initialisiert SvgPanZoom darauf. Dann wurde es (mit jQuery) in das versteckte Modal verschoben. Das hat das Problem für mich gelöst.

<div id="svgContainer" style="width: 400px; height: 400px; 
     border:1px solid black; padding:5px; overflow:hidden; 
     visibility: hidden"><svg>...</svg></div>