В этой статье будет рассказано про основы работы и управление SVG через JavaScript, но не буду использовать чистый JS, а библиотеку SVG.JS, так как, по умолчанию с SVG работать не очень удобно.
Также есть ещё библиотека SNAP.JS, но она достаточна тяжёлая и дольше работает, поэтому расскажу о SVG.JS.
Установка SVG.JS:
Установка очень простая, вы можете установить его через npm или просто скачать из GitHub, там нажмите на svg.js.zip.
Подключение к HTML файлу:
Скачиваем файл с GitHub.
После того как скачали этот файл подключаете файл svg.min.js, в свой проект, в HTML файл или если не хотите скачивать, то можете использовать эту ссылку «https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js».
Подключение через npm:
Также если вы решили скачать через npm, то вот команда:
1 | npm install @svgdotjs/svg.js |
Ну и подключение через import:
1 | import { SVG } from '@svgdotjs/svg.js' |
Как то так подключать эту библиотеку.
Работа с SVG через JavaScript:
Теперь пришло время для полноценной работы с SVG. Работа будет чем то напоминать на работу с canvas, тут будут примеры svg js.
1 2 3 4 | // Получаем и задаём размер для поля в котором будем рисовать SVG let draw = SVG().addTo('div.svg').size(300, 300) // Рисуем квадрат let rect = draw.rect(100, 100).attr({ fill: '#38A6FF' }) |
Как видите тут в целом не чего сложного нет, сначала в переменную draw, мы грубо говоря запихиваем объект где будем рисовать svg, используя для этого элемент с селектором div.svg, задаём ему ширину и высоту 300 пикселей.
После этого создаём квадрат синего цвета, для этого используем функцию draw.rect(100, 100), где 100 и 100, это размер в пикселях, а attr({ fill: '#38A5FF' }), это добавляет атрибуты, в нашем случае атрибут цвета.
Вот такой пример работы со SVG в JavaScript.
Таким же образом можно делать и другие фигуры, например, линии, круг или элипс используя функции draw.line(), draw.circle() и draw.ellipse соответственно.
Ещё используя .move(left, top), можете подвинуть объект, куда вам хочется, но без анимации, об этом чуть ниже.
Вот ещё не большой пример.
1 2 3 4 | // Получаем и задаём размер для поля в котором будем рисовать SVG let draw = SVG().addTo('div.svg').size(300, 300) // Рисуем круг и передвигаем его let circle = draw.circle(100, 100).attr({ fill: '#38A6FF' }).move(20, 50) |
Вот результат.
Анимация SVG на JavaScript:
Теперь посмотрим js анимация SVG, тут всё просто, для этого используется функция circle.animate(ms), вот не большой код.
1 2 3 4 5 6 | // Получаем и задаём размер для поля в котором будем рисовать SVG let draw = SVG().addTo('div.svg').size(300, 300) // Рисуем круг и передвигаем его let circle = draw.circle(100, 100).attr({ fill: '#38A6FF' }) // Передвигаем круг с анимацией circle.animate(1000).move(20, 50) |
Таким образом получается изменить позицию, к сожалению я не смогу сейчас показать этот код в действии, но в будущем это возможно это исправлю.
Но суть ясна, просто пишем сколько времени нам надо и изменяем позицию объекта или ещё какой нибудь параметр.
Вывод:
Как видите управление SVG через javascript очень простое, особенно используя эту библиотеку, для работы с этим.
Тут только основы, но если статья окажется популярной, возможно напишу ещё одну статью где подробно опишу как работать с SVG используя эту библиотеку.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...