В этой статье я сделал не большой обзор JavaScript библиотеки Snap.svg, которая создана для работы с SVG, ещё научи работать с ней.
Также на сайте есть статья, Основы работы с SVG на JavaScript, где рассказывается как работать с библиотекой SVG.JS, поэтому, если вам не понравится библиотека Snap.svg, то посмотрите эту.
Установка Snap.svg:
Сначала установка, она очень простая, прямо на официальном сайте есть кнопка «download», нажимаем её и скачивается .Zip архив с библиотекой.
Дальше заходим в архив, и от туда архивируем папку «Snap.svg-0.5.1», в папку с вашем проектом.
В вашем HTML файле проекта подключаем этот script.
1 | <script src="Snap.svg-0.5.1/dist/snap.svg-min.js"></script> |
Как можете заметить всё очень просто.
Работа со Snap.svg:
Теперь пришло время по работать не много с этой библиотекой, для этого в HTML создаём тег <svg>, с классом svg.
1 | <svg class="svg"></svg> |
В CSS настраиваем его размеры, ширину и высоту.
1 2 3 4 | .svg { width: 800px; height: 800px; } |
Ну и теперь самое интересное, пришлой показать Snap.svg примеры работы с этой библиотекой в JavaScript.
1 2 3 4 5 6 7 8 9 | // Берём SVG элемент let svg = Snap(".svg"); // Создаём квадрат let rect = svg.rect(10, 10, 100, 100); // Добавляем ему атрибуты rect.attr({ // Делаем его синим цветом fill: "blue", }); |
Давайте разберём код выше, сначала мы берём SVG элемент, потом создаём в нём квадрат, на позиции 10 пикселей по X и Y, размер 100 пикселей по ширине и высоте.
При создание фигуры мы не можем задать ей цвет, для этого, дальше мы добавляем ей атрибут заливки цвета, в нашем случае синего цвета.
Вот какой результат получился.
Как видите, это просто синий квадрат, но это ещё не все фигуры которые можно создавать.
- paper.rect(x, y, width, height) — Создаёт прямоугольник или квадрат:
- paper.circle(x, y, radius) — Создаёт круг;
- paper.ellipse(x, y, rx, ry) — Создаёт эллипс или овал;
Теперь что касается пожалуй одной из важнейшей функции в этой библиотеки, element.attr(json), с ней всё просто, вы просто вписываете параметры как для обычного SVG, в json, тут вам надо уметь работать с чистым SVG.
Анимация Snap.JS:
Пришло время посмотреть как работать со самым интересным, это с анимацией, это делается очень просто.
Для начала покажем самый простой пример анимации, это когда меняешь параметры, в нашем случае, будем менять цвет со синего на зелёный, вот как это делается.
1 | rect.animate({fill: "green"}, 1000); |
Как видите, мы просто взяли наш элемент, изменили параметр fill, и добавили 1000 миллисекунд, это время сколько будет изменятся, вот что получилось.
Как видите не чего не изменилось кроме цвета, ещё, вы этого не видите, но изменение прошло плавно, таким образом вы можете менять параметры или атрибуты.
Также ещё можно менять другие параметры, например, позицию или размеры, вот как это делается.
1 | rect.animate({fill: "green", x: 20, y: 30}, 1000); |
Мы просто ещё добавляем данные о позиции, вот и всё, вот наш результат.
Если приглядеться, то можно заметить, что он ещё и позицию изменил.
Как то так происходит работа с анимацией.
Вывод:
В этой статье мы показали основы работы с библиотекой для работы со SVG, Snap.svg, также тут были примеры работы с ней, в остальном, мне лично не очень понравилась она, на мой взгляд SVG.js на много лучше, быстрее и понятнее.
Ну, а если вам понравилась эта библиотека то заходите в документацию и посмотрите быстрый старт.
Подписываетесь на соц-сети:
Оценка:
Загрузка...