Dette er lidt esoterisk af en ting, jeg var bare nødt til at gøre det selv en gang og fandt det forvirrende, så jeg troede, jeg ville lave en hel video på det.
Sagen er, at ikke alt er en i SVG. er fantastisk, fordi det kan være hvad som helst. Men syntaksen for det er bare lidt mere kompleks end nogen af de andre former. Så (måske af den grund?) Illustrator udsender altid figurerne i SVG med det mest passende element. Rektangler er , andre former, der kun består af lige linjer, er a , eller hvis det er en åben form a osv.
Det ville være fint, undtagen DOM-metoderne for disse former varierer. Et stielement har en metode kaldet, getTotalLength()som lader dig vide, hvor lang stien er. Det er ret sejt og nogle gange nyttigt, men du kan ikke kun gøre det på et andet element.
En af grundene til at du måske vil vide, at længden er, fordi du har til hensigt at animere den, så formen "trækker sig" - en cool lille designeffekt (samling af eksempler). Du kan gøre det i CSS, men det er rart at bruge noget JavaScript til at anvende den CSS, så det animerer den perfekte afstand hver gang.
Så sig, at du vil gøre denne tegningseffekt, men formen er en, så JavaScript mislykkes. Du kan forvandle denne polygon til en sti uden at ændre den visuelt ved blot at tilføje et punkt til den, der har bezier-håndtag. Som i skal du klikke med penværktøjet og trække, så håndtagene kommer ud og justerer håndtagene lige langs den linje, der allerede er der. Eksistensen af dette punkt vil gøre det til et output.
Hvis du gør dette meget, er der et værktøj kaldet Poly2Path, der fungerer, og det kræver ikke det overflødige punkt.