Ovo je malo ezoterično, samo sam to jednom trebao učiniti i učinilo me zbunjujućim, pa sam mislio napraviti cijeli video o tome.
Stvar je u tome što nije sve u SVG-u. je fantastično jer može biti sve. Ali sintaksa je malo složenija od bilo kojeg drugog oblika. Dakle (možda iz tog razloga?) Illustrator uvijek prikazuje oblike u SVG-u s najprikladnijim elementom. Pravokutnici jesu , drugi oblici sastavljeni samo od ravnih crta jesu a , ili ako je to otvoreni oblik a , itd.
To bi bilo u redu, osim što se DOM metode za te oblike razlikuju. Element puta ima pozvanu metodu getTotalLength()koja vam omogućuje da znate koliko je dugačka staza. To je prilično cool i ponekad je korisno, ali ne možete to učiniti samo na bilo kojem drugom elementu.
Jedan od razloga zbog kojih biste možda željeli znati da je duljina je taj što je namjeravate animirati tako da se oblik "crta sam" - cool mali efekt dizajna (zbirka primjera). Možete to učiniti u CSS-u, ali lijepo je koristiti neki JavaScript za primjenu tog CSS-a tako da svaki put animira savršenu udaljenost.
Recimo da želite napraviti taj efekt crtanja, ali oblik je tako da JavaScript ne uspije. Taj poligon možete pretvoriti u putanju, bez vizualnog mijenjanja, jednostavnim dodavanjem točke koja ima bezier handle. Kao i u, kliknite alatom Pen i povucite tako da ručke izađu i poravnaju ručke točno po liniji koja je već tu. Postojanje te točke učinit će to izlaznim rezultatom.
Ako ovo puno radite, postoji alat nazvan Poly2Path koji radi i ne zahtijeva tu suvišnu točku.