#фишка дня Давайте сегодня продолжим тему SVG. Не знаю, скол | Будни разработчика
#фишка дня
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length