Одним из преимуществ файлов SVG является возможность редактировать их с помощью JavaScript на HTML-странице. Чтобы упростить процесс, я создаю небольшое приложение с Svelte, куда вы можете загрузить файл SVG, отредактировать его, а затем сохранить обратно на диск.
Откройте SVG-файл
Сначала я создаю кнопку для выбора файла для загрузки и элемент HTML для отображения файла.
После выбора файла я получаю что-то вроде этого:
Как масштабировать и перемещать карты SVG
Для некоторых карт достаточно общего вида, но в данном случае меня интересует возможность увеличения некоторых элементов. И, конечно же, возможность перемещаться по карте.
Для этого я могу использовать репозиторий luncheon/svg-pan-zoom-container. Я устанавливаю пакет, используя:
npm i svg-pan-zoom-containerПоэтому я меняю свой код:
Атрибут data-zoom-on-wheel включает zoom с помощью колесика мыши. Установите минимальный масштаб 0,3 и максимальный масштаб 20. Атрибут data-pan-on-drag разрешает движение мыши. В данном случае я устанавливаю, что движение осуществляется комбинацией клавиш control плюс left mouse button.
В дополнение к колесику мыши также полезно иметь кнопку или что-то подобное для управления масштабированием. Я могу, например, создать элемент input типа range, привязав его значение к переменной scale.
Чтобы передать масштаб от карты к элементу, я добавляю MutationObserver:
Затем я добавляю новое событие к элементу input [range] для динамического изменения масштаба:
Результат выглядит следующим образом:
Наконец, я могу добавить кнопку для сброса масштаба и возврата к исходному:
Следующий шаг — понять, как управлять слоями и выделениями. Но об этом я расскажу в следующем посте.
Спасибо за прочтение! Оставайтесь с нами, чтобы узнать больше.
Не пропустите мою следующую статью — подпишитесь на мой Список адресов электронной почты среднего уровня
Первоначально опубликовано на https://blog.stranianelli.com 16 мая 2022 г.
