Основы работы с SVG на JavaScript

управление svg через javascript
Метки: /

В этой статье будет рассказано про основы работы и управление SVG через JavaScript, но не буду использовать чистый JS, а библиотеку SVG.JS, так как, по умолчанию с SVG работать не очень удобно.

Также есть ещё библиотека SNAP.JS, но она достаточна тяжёлая и дольше работает, поэтому расскажу о SVG.JS.

Установка SVG.JS:

Установка очень простая, вы можете установить его через npm или просто скачать из GitHub, там нажмите на svg.js.zip.

Подключение к HTML файлу:

Скачиваем файл с GitHub.

Скачиваем библиотеку SVG.JS из GitHub

После того как скачали этот файл подключаете файл svg.min.js, в свой проект, в HTML файл или если не хотите скачивать, то можете использовать эту ссылку «https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js».

Подключение через npm:

Также если вы решили скачать через npm, вот как скачиваеться.

Ну и подключение через import.

Как то так подключать эту библиотеку.

Работа с SVG через JavaScript:

Теперь пришло время для полноценной работы с SVG. Работа будет чем то напоминать на работу с canvas, тут будут примеры svg js.

Как видите тут в целом не чего сложного нет, сначала в переменную draw, мы грубо говоря запихиваем объект где будем рисовать svg, используя для этого элемент с селектором div.svg, задаём ему ширину и высоту 300 пикселей.

После этого создаём квадрат синего цвета, для этого используем функцию draw.rect(100, 100), где 100 и 100, это размер в пикселях, а attr({ fill: '#38A5FF' }), это добавляет атрибуты, в нашем случае атрибут цвета.

Вот такой пример работы со SVG в JavaScript.

SVG квадрат

Таким же образом можно делать и другие фигуры, например, линии, круг или элипс используя функции draw.line(), draw.circle() и draw.ellipse соответственно.

Ещё используя .move(left, top), можете подвинуть объект, куда вам хочется, но без анимации, об этом чуть ниже.

Вот ещё не большой пример.

Вот результат.

SVG круг

Анимация SVG на JavaScript:

Теперь посмотрим js анимация SVG, тут всё просто, для этого используется функция circle.animate(ms), вот не большой код.

Таким образом получается изменить позицию, к сожалению я не смогу сейчас показать этот код в действии, но в будущем это возможно это исправлю.

Но суть ясна, просто пишем сколько времени нам надо и изменяем позицию объекта или ещё какой нибудь параметр.

Вывод:

Как видите управление SVG через javascript очень простое, особенно используя эту библиотеку, для работы с этим.

Тут только основы, но если статья окажется популярной, возможно напишу ещё одну статью где подробно опишу как работать с SVG используя эту библиотеку.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 1
Средняя оценка: 5,00
Загрузка...

Поделится:

Также рекомендую:

55058653