See on natuke esoteeriline asi, mul oli vaja seda lihtsalt üks kord ise teha ja see tundus segane, nii et mõtlesin, et teeksin selle kohta terve video.
Asi on selles, et kõik pole SVG-s. on fantastiline, sest see võib olla ükskõik milline. Kuid selle süntaks on lihtsalt natuke keerulisem kui mis tahes muu kuju. Nii et (võib-olla sel põhjusel?) Illustrator väljastab SVG-s olevad kujundid alati kõige sobivama elemendiga. Ristkülikud on , muud ainult sirgetest koosnevad kujundid on a või kui see on avatud kuju a jne.
See oleks tore, välja arvatud juhul, kui nende kujundite DOM-meetodid erinevad. Teeelemendil on meetod nimega, getTotalLength()mis annab teada, kui pikk tee on. See on üsna lahe ja mõnikord kasulik, kuid te ei saa seda teha ainult a elementi kasutades.
Üks põhjus, miks võiksite teada, et pikkus on, on see, et kavatsete seda animeerida nii, et kuju "joonistab ennast" - see on väike lahe kujundusefekt (näidete kogu). Saate seda teha CSS-is, kuid on tore kasutada selle JavaScripti rakendamiseks mõnda JavaScripti, nii et see animeerib iga kord täiusliku vahemaa.
Nii et öelge, et soovite seda joonistamisefekti teha, kuid kuju on nii, et JavaScript ebaõnnestub. Saate muuta selle hulknurga teeks ilma visuaalset muutmist, lisades sellele lihtsalt bezier-käepidemega punkti. Nagu ka siin, klõpsake pliiatsi tööriistaga ja lohistage, et käepidemed väljuksid ja joondaksid käepidemed juba seal joont mööda. Selle punkti olemasolu muudab selle väljundiks a.
Kui teete seda palju, on olemas tööriist nimega Poly2Path, mis töötab ja ei vaja seda üleliigset punkti.