22: SVG animacija naudojant CSS CSS-gudrybės

Kai naudojate tiesioginį SVG, visas tas SVG kodas yra teisingas HTML, taigi ir DOM. Galite juos suformuoti taip , kaip norėtumėte ,

, ar bet kurį kitą HTML elementą. CSS stilius suteikia animacijos ir perėjimų galimybę.
Paprastas pavyzdys:

Žiūrėkite „Pen CodePen“ logotipą kaip „Inline SVG“, kurį sukūrė Chrisas Coyieris (@chriscoyier) „CodePen“.

Šiame pamokojime parašyta, kaip išspręsti šiek tiek sudėtingesnį dizainą. Štai tokia demonstracija.

Žr. Chriso Coyierio (@chriscoyier) „Pen Wufoo SVG“ skelbimą „CodePen“.

Šioje ekrano juostoje mes pradedame dar vieną animuotą „Wufoo“ SVG reklamą, pradedant beveik nuo nulio. Dizainas turi keletą debesų, kuriuos mes animuojame judėdami ir kartodami sklandžiai ir be galo.

Iš pradžių mes naudojome įterptą SVG ir animavome ją CSS, tiesiog pridėta prie to paties HTML dokumento. Bet tada, norėdami parodyti, kaip tai veikia, mes perkėlėme tą CSS į patį SVG, kuris yra visiškai galiojantis. Priežastis, kad galbūt norėsite tai padaryti, yra ta, kad tada animacija gali būti paleista net tada, kai naudojate SVG kaip arba `background-image`.

Demonstracija:

Žiūrėkite Chriso Coyier (@chriscoyier) „Pen kKdDj“ svetainėje „CodePen“.

Tos animacijos naršyklės palaikymas skirsis. Rašymo metu jis veikė tik „Chrome“.