Я обнаружил, что 98% всего моего использования SVG происходит из предварительно созданных файлов SVG или векторной графики в каком-то программном обеспечении для дизайна, которое я в конечном итоге экспортирую как SVG. Не очень часто я вручную манипулирую координатами объектов в коде SVG. Эй, у меня даже есть книга обо всем этом.
Но время от времени это уместно и, может быть, даже немного весело. В данном случае я хотел нарисовать довольно конкретную линию с парой мягких поворотов. С небольшим знанием синтаксиса путей SVG (самого странного, но самого мощного из инструментов рисования SVG) мы можем сделать это без особых хлопот.
Демо, с которым мы играли в видео:
См. Pen
KOvPaa Криса Койера (@chriscoyier)
на CodePen.
Оригинальная идея:
См. «
Путь с подсветкой пером» Криса Койера (@chriscoyier)
на CodePen.
Помните, что мы не сделали так, чтобы настроить SVG таким образом, чтобы закругленные углы оставались в хорошем соотношении сторон, в то время как остальная часть SVG была гибкой и могла заполнять вертикальное и горизонтальное пространство. Это возможно, просто это сложнее, и мы поговорим об этом в другой раз.