To je malo ezoterično, enkrat sem to moral storiti sam in zmedlo me je, zato sem mislil, da bom o tem naredil cel video.
Stvar je v tem, da v SVG ni vse . je fantastično, ker je lahko karkoli. Toda sintaksa zanj je le nekoliko bolj zapletena kot katera koli druga oblika. Torej (morda iz tega razloga?) Illustrator vedno prikaže oblike v SVG z najprimernejšim elementom. Pravokotniki so , druge oblike, sestavljene samo iz ravnih črt, so a , ali če gre za odprto obliko a itd.
To bi bilo v redu, le da se metode DOM za te oblike razlikujejo. Element poti ima imenovano metodo, getTotalLength()ki vam pove, kako dolga je pot. To je precej kul in včasih koristno, vendar tega ne morete storiti samo na nobenem drugem elementu.
Eden od razlogov, zaradi katerega bi morda želeli vedeti, da je dolžina, je ta, da jo nameravate animirati, tako da se oblika "nariše" - kul majhen učinek oblikovanja (zbirka primerov). To lahko storite v CSS, vendar je lepo uporabiti nekaj JavaScript za uporabo tega CSS, tako da vsakič animira popolno razdaljo.
Recimo, da želite narediti ta učinek risanja, vendar je oblika tako, da JavaScript ne uspe. Ta poligon lahko spremenite v pot, ne da bi jo vizualno spremenili, tako da ji preprosto dodate točko, ki ima boljši ročaj. Tako kot kliknite z orodjem Pen in povlecite, da se ročice prikažejo in poravnajo ročaje desno po črti, ki je že tam. Obstoj te točke bo v izhodu.
Če to počnete veliko, obstaja orodje Poly2Path, ki deluje in ne zahteva te odvečne točke.