Това е малко езотерично за нещо, просто трябваше да го направя сам веднъж и ми се стори объркващо, затова си помислих, че ще направя цял видеоклип върху него.
Работата е там, че не всичко е в SVG. е фантастично, защото може да бъде всичко. Но синтаксисът за него е малко по-сложен от всяка друга форма. Така че (може би поради тази причина?) Illustrator винаги извежда формите в SVG с най-подходящия елемент. Правоъгълниците са , други форми, съставени само от прави линии, са a , или ако това е отворена форма a и т.н.
Това би било добре, освен че DOM методите за тези форми варират. Елементът на пътя има метод, наречен getTotalLength()който ви позволява да знаете колко е дълъг пътят. Това е доста готино и понякога полезно, но не можете да го правите само на , нито на друг елемент.
Една от причините, поради които може да искате да знаете, че дължината е, защото възнамерявате да я анимирате, така че формата да се „нарисува“ - страхотен малък дизайнерски ефект (колекция от примери). Можете да го направите в CSS, но е хубаво да използвате някои JavaScript, за да приложите този CSS, така че да анимира перфектното разстояние всеки път.
Така че кажете, че искате да направите този ефект на рисуване, но формата е така, че JavaScript се проваля. Можете да превърнете този полигон в път, без да го променяте визуално, като просто добавите точка към него, която има по-безизходна дръжка. Като в, щракнете с инструмента Pen и плъзнете, така че дръжките да излязат и да подравнят дръжките точно по линията, която вече е там. Съществуването на тази точка ще го направи в резултат.
Ако правите това много, има инструмент, наречен Poly2Path, който работи и не изисква тази излишна точка.