Это немного эзотерическая вещь, мне просто нужно было сделать это один раз, и это сбивало с толку, поэтому я подумал, что сделаю об этом целое видео.
Дело в том, что не все в SVG. это фантастика, потому что это может быть что угодно. Но синтаксис для него немного сложнее, чем для любых других форм. Итак (может быть, по этой причине?) Illustrator всегда выводит фигуры в SVG с наиболее подходящим элементом. Прямоугольники , другие формы, состоящие только из прямых линий, это a , или, если это открытая форма, a и т. Д.
Это было бы хорошо, если бы не разные методы DOM для этих фигур. У элемента пути есть метод, getTotalLength()который позволяет узнать длину пути. Это довольно круто и иногда полезно, но вы не можете сделать это только на каком- либо другом элементе.
Одна из причин, по которой вы можете захотеть узнать эту длину, заключается в том, что вы собираетесь анимировать ее так, чтобы форма «рисовала сама себя» - небольшой классный дизайнерский эффект (коллекция примеров). Вы можете сделать это в CSS, но приятно использовать некоторый JavaScript для применения этого CSS, чтобы он каждый раз анимировал идеальное расстояние.
Допустим, вы хотите создать этот эффект рисования, но форма такая, поэтому JavaScript не работает. Вы можете превратить этот многоугольник в контур, не изменяя его визуально, просто добавив к нему точку с маркером Безье. Как и в случае, щелкните инструментом «Перо» и перетащите так, чтобы ручки вышли наружу, и выровняйте ручки прямо по линии, которая уже есть. Наличие этой точки сделает ее выводом.
Если вы делаете это часто, есть инструмент под названием Poly2Path, который работает и не требует этой лишней точки.