SVG-PanZoom не работает, если контейнер скрыт

Question

SVG-PanZoom не работает, если контейнер скрыт

У меня есть экземпляр SVG-Pan-Zoom, встроенный в Tabbing-Component. Когда активная вкладка изменяется, предыдущая скрывается с display: none, После переключения на первую вкладку (которая снова отображается с display: block) экземпляр svgPanZoom находится в непригодном для использования состоянии. Я не совсем понимаю, что происходит.

Мне удалось воспроизвести это поведение только в Google Chrome.

Я создал пример для проверки этого: http://svgpan-example.bitballoon.com/

Это ошибка, или я что-то упустил?

0

svgpanzoom

Источник

user7740353 20 мар '17 в 14:36

2 ответа

Другие вопросы по тегам svgpanzoom

user1194327 20 мар '17 в 20:50 2017-03-20 20:50 · Answer 1 · 2017-03-20 20:50

Кажется, это специфическая для браузера реализация. Когда вы устанавливаете display: none на embed элемент (или его родительский контейнер) браузер, скорее всего, выгружает ресурс. После удаления display: none - похоже, что браузер переинициализирует / перезагружает ресурс. Вы можете видеть это на основе 2 фактов:

На вкладках Сеть инструментов разработчика вы видите, что ресурс загружается снова, когда вы показываете элемент
Если вы измените элемент внутри SVG (в инспекторе), то после скрытия и показа - изменение пропало.

svg-pan-zoom не контролирует изменения SVG из внешнего мира, так что это не проблема. Решение состоит в том, чтобы использовать встроенный SVG (они работали для меня при скрытии / показе) или просто протестировать все остальные параметры (теги object и img). Но встроенный SVG всегда является предпочтительным методом.

user3886084 23 мар '17 в 17:37 2017-03-23 17:37 · Answer 2 · 2017-03-23 17:37

Объект с display: hidden удаляется из потока DOM, и поэтому в некоторых браузерах в это время не будет никаких размерных данных (ширина, высота). Мое решение может быть немного нелепым, но... Мне нужен был SVG в модале начальной загрузки. Поэтому я поместил элемент svg внизу тела за пределы модальной зоны, установил видимость: скрытый. Затем инициализировал svgPanZoom на нем. Затем переместил его (используя jQuery) в скрытый модал. Это решило проблему для меня.

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