28: Kako djeluje SVG crtanje linija - CSS-trikovi

Anonim

Popularna mala SVG animacijska tehnika je crtanje puta. Ako to ne možete zamisliti, evo zbirke od milijun primjera koje sam stvorio. U osnovi moždani udar oko SVG oblika vuče se s vremenom.

Za to sam prvi put čuo iz članka Jakea Archibalda Animirani crtanje linija u SVG-u, što je približno dobro objašnjenje toga što može biti. Ali naravno, pokušao sam i svoje objašnjenje i to prelazimo u ovom videu.

Mislim da je najlakše razmišljati o tome kako započeti s CSS-om i kako funkcioniraju svojstva crtica primijenjena na SVG oblik. Kako mogu postati dulji, pa čak i dovoljno dugački do te mjere da pokriju (ili ne pokrivaju) cijeli oblik. Zatim crtanje djeluje na način da ih nadoknadi kad su toliko dugi.

Onda kad to shvatite, shvatite da JavaScript može pomoći u izračunu duljine potrebnih crtica i pomaka i to baš kako treba.