@paper_castle
Фрилансер

Как корретно релизовать масштабирование и перемещение SVG в контейнере?

Есть инлайн SVG со встроенным img, по сути аналог іmagemaps, при наведении на path зоны подсвечиваются.
В дестопе блок адаптивно занимает весь вьюпорт без необходимости масштаба, в мобайле блок оригинальных размеров, но виден только через вьюпорт, остальное в скролле, возникла необходимость масштабировать.

Что использовалось:
https://github.com/bumbu/svg-pan-zoom
https://github.com/anvaka/panzoom
https://github.com/timmywil/panzoom

Ожидаемое поведение:
Пример желаемого поведения без либ - небольшой вьюпорт, overflow: scroll и перетаскивание (не хватает только зума)

При указании ограничений (boundaries) элемент не может быть меньше вьюпорта (zoom 1:1 and more) и не может быть "вытащен" частично во вьюпорт, напр, видимые углы границ изображения (restrict pan) (пример c svg-pan-zoom)

Проблема:
Все указанные либы хорошо умеют zoom/pan. Без ограничений (можно перетянуть элемент наполовину во вьюпорт) все работает отлично, но при указании рамки - не могут в zoom или pan. Мб есть альтернативные либы, мб кто сталкивался с похожей проблемой.
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы