Acesta este un pic esoteric al unui lucru, am avut nevoie doar să-l fac singur o dată și mi s-a părut confuz, așa că m-am gândit să fac un videoclip întreg pe el.
Problema este că nu totul este un în SVG. este fantastic pentru că poate fi orice. Dar sintaxa pentru aceasta este doar puțin mai complexă decât oricare dintre celelalte forme. Deci (poate din acest motiv?) Illustrator scoate întotdeauna formele în SVG cu elementul cel mai adecvat. Dreptunghiurile sunt , alte forme alcătuite doar din linii drepte sunt a , sau dacă este o formă deschisă a etc.
Ar fi bine, cu excepția metodelor DOM pentru aceste forme. Un element de cale are o metodă numită getTotalLength()care vă permite să știți cât de lungă este calea. Este destul de mișto și uneori util, dar nu o puteți face doar pe un alt element.
Unul dintre motivele pentru care ați putea dori să știți că lungimea este că intenționați să o animați astfel încât forma „să se deseneze singură” - un mic efect de design rece (colecție de exemple). Puteți face acest lucru în CSS, dar este plăcut să folosiți ceva JavaScript pentru a aplica acel CSS, astfel încât să animeze distanța perfectă de fiecare dată.
Deci, spuneți că doriți să faceți acel efect de desen, dar forma este un astfel încât JavaScript nu reușește. Puteți transforma acel poligon într-o cale, fără a-l schimba vizual, adăugând pur și simplu un punct care are un mâner bezier. Ca și în, faceți clic cu instrumentul Pen și trageți astfel încât mânerele să iasă și să alinieze mânerele chiar de-a lungul liniei care este deja acolo. Existența acestui punct îl va transforma într-o ieșire.
Dacă faceți acest lucru mult, există un instrument numit Poly2Path care funcționează și nu necesită acel punct de prisos.