Tämä on pieni esoteerinen asia, minun tarvitsi vain tehdä se itse kerran ja huomasin sen hämmentäväksi, joten ajattelin, että tekisin koko videon siitä.
Asia ei ole, että kaikki ei ole SVG: ssä. on fantastinen, koska se voi olla mitä tahansa. Mutta sen syntaksi on vain hieman monimutkaisempi kuin mikään muu muoto. Joten (ehkä tästä syystä?) Illustrator tuottaa SVG: n muodot aina sopivimmalla elementillä. Suorakulmiot ovat , muut muodot, jotka koostuvat vain suorista viivoista, ovat a , tai jos se on avoin muoto a , jne.
Se olisi hieno, paitsi että näiden muotojen DOM-menetelmät vaihtelevat. Polkuelementillä on menetelmä nimeltä, getTotalLength()jonka avulla voit tietää, kuinka pitkä polku on. Se on aika siistiä ja joskus hyödyllistä, mutta et voi tehdä sitä vain millään muulla elementillä.
Yksi syy, miksi haluat ehkä tietää, että pituus johtuu siitä, että aiot animoida sen niin, että muoto "vetää itsensä" - pieni viileä muotoiluefekti (kokoelma esimerkkejä). Voit tehdä sen CSS: ssä, mutta on mukavaa käyttää JavaScriptiä CSS: n käyttämiseen, joten se animoi täydellisen etäisyyden joka kerta.
Joten sanokaa, että haluat tehdä piirustuksen, mutta muoto on niin, että JavaScript epäonnistuu. Voit muuttaa polygonin poluksi muuttamatta sitä visuaalisesti yksinkertaisesti lisäämällä siihen pisteen, jossa on bezier-kahva. Napsauta kuten kynätyökalulla ja vedä, jotta kahvat tulevat esiin ja kohdista kahvat heti jo olemassa olevan linjan mukaisesti. Tämän pisteen olemassaolo tekee siitä tuotoksen.
Jos teet tämän paljon, on työkalu nimeltä Poly2Path, joka toimii, eikä vaadi kyseistä tarpeetonta pistettä.