Едно от предимствата на 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 г.
