Бодрящего кофе, друзья!
В очередной раз "попало" в поле зрения текстовое поле. Вы когда-нибудь задумывались почему текстовое поле всегда имеет прямоугольную форму и мы никак повлиять на это не можем? - По мне так эту несправедливость надо исправлять :)
Что хотим в итоге получить:
Изогнутое текстовое поле в которое пользователь может вводить текст.
На деле всё гораздо легче, чем кажется. Берём svg элемент и в нём создаём текстовую Ноду с определением пути. Оборачиваем всё это в редактируемый слой и наслаждаемся. Если применить смекалку, то для нашего текстового поля доступны все возможности по анимации и дизайну svg элементов.
Не знаю на сколько практично, ни разу такой кейс не попадался, но в копилке данный трюк точно заслуживает место быть.
Для тех кто любит в свободное время поломать голову над головоломками, есть пропущенный досадный недостаток, я его специально оставил не реализованным:
Если удалить последний символ, то написать больше нечего нельзя. Забегу наперёд и скажу, что это из-за удаления текстовой ноды у svg элемента.
Присылайте ваши варианты решения в комментариях, будет очень интересно посмотреть. Своё решение я опубликую в следующих статьях, подписывайтесь, не пропустите :)
Если у вас есть макеты с элементами, которые вызывают трудности при реализации, выкладывайте в комментариях, будет интересно разобрать. Поддержать канал для выхода новых статей вы как всегда можете вопросами в комментариях и лайками
