Népszerű kis SVG animációs technika az útvonalrajz. Ha nem tudod elképzelni, íme egy zillion példa, amelyet hoztam létre. Lényegében az SVG alakzatok körüli vonás idővel felhívja magát.
Először Jake Archibald animált vonalvezetés cikkéből hallottam róla az SVG-ben, ami jó magyarázattal szolgál, amire csak lehet. De természetesen megkíséreltem a saját magyarázatomat is, és ezt áttekintjük ebben a videóban.
Szerintem a legegyszerűbb a CSS-sel kezdeni, és hogy a kötőjel tulajdonságai hogyan működnek egy SVG alakra alkalmazva. Hogyan hosszabbak és még elég hosszúak lehetnek ahhoz a ponthoz, hogy az egész alakot eltakarja (vagy ne takarja el). Ezután a rajz kiegyenlíti őket, ha ilyen hosszúak.
Ezután, ha ezt megértette, értse meg, hogy a JavaScript segíthet a szükséges kötőjelek és eltolások hosszának kiszámításában, és jól csinálja.