Це трохи езотерично, просто мені потрібно було зробити це один раз, і це мене заплутало, тому я подумав зробити ціле відео про це.
Справа в тому, що не все є у SVG. це фантастика, тому що це може бути що завгодно. Але синтаксис для нього трохи складніший, ніж будь-яка інша форма. Тож (можливо, з цієї причини?) Illustrator завжди виводить фігури у SVG з найбільш підходящим елементом. Прямокутники бувають , інші фігури, що складаються лише з прямих ліній, є a , або якщо це відкрита фігура a тощо.
Це було б добре, за винятком того, що методи DOM для цих фігур відрізняються. Елемент шляху має метод, що називається, getTotalLength()який дає змогу знати, наскільки довгий шлях. Це досить круто і іноді корисно, але ви не можете робити це лише на будь- якому іншому елементі.
Однією з причин, чому ви можете хотіти знати, що довжина, є те, що ви маєте намір анімувати її так, щоб фігура «намалювала себе» - крутий маленький ефект дизайну (збірка прикладів). Ви можете зробити це в CSS, але приємно використовувати деякий JavaScript, щоб застосувати цей CSS, щоб він щоразу анімував ідеальну відстань.
Отже, скажімо, ви хочете зробити цей ефект малювання, але форма така, що JavaScript не вдається. Ви можете перетворити цей багатокутник на контур, не змінюючи його візуально, просто додавши до нього крапку, яка має більш зручний дескриптор. Як і тут, клацніть інструментом «Перо» і перетягніть, щоб ручки вийшли і вирівняли ручки прямо вздовж лінії, яка вже там. Існування цієї точки зробить її вихідною.
Якщо ви багато робите це, існує інструмент Poly2Path, який працює, і не вимагає цієї зайвої точки.