26: Tvinge figurer til å være stier - CSS-triks

Innholdsfortegnelse

Dette er litt esoterisk av noe, jeg trengte bare å gjøre det selv en gang og syntes det var forvirrende, så jeg trodde jeg skulle gjøre en hel video på den.

Saken er at ikke alt er i SVG. er fantastisk fordi det kan være hva som helst. Men syntaksen for den er bare litt mer kompleks enn noen av de andre formene. Så (kanskje av den grunn?) Illustrator skriver alltid ut figurene i SVG med det mest passende elementet. Rektangler er , andre former som består av bare rette linjer er a , eller hvis det er en åpen form a , etc.

Det ville være greit, bortsett fra at DOM-metodene for disse figurene varierer. Et stielement har en metode som heter getTotalLength()som lar deg vite hvor lang stien er. Det er ganske kult og noen ganger nyttig, men du kan ikke bare gjøre det på et , ikke noe annet element.

En grunn til at du kanskje vil vite at lengden er fordi du har tenkt å animere den slik at formen "trekker seg" - en kul, liten designeffekt (eksempler). Du kan gjøre det i CSS, men det er hyggelig å bruke JavaScript for å bruke den CSS slik at den animerer den perfekte avstanden hver gang.

Så si at du vil gjøre den tegneeffekten, men formen er en slik at JavaScript mislykkes. Du kan gjøre den polygonen om til en bane uten å endre den visuelt, ved å bare legge til et punkt til den som har et bedre håndtak. Som i, klikk med pennverktøyet og dra slik at håndtakene kommer ut og justerer håndtakene rett langs linjen som allerede er der. Eksistensen av dette punktet vil gjøre det til en utgang.

Hvis du gjør dette mye, er det et verktøy som heter Poly2Path som fungerer, og krever ikke det overflødige punktet.

Interessante artikler...