22: Animiranje SVG-a s CSS-om - CSS-trikovi

Kada koristite ugrađeni SVG, sav taj SVG kôd nalazi se točno u HTML-u, a time i u DOM-u. Možete ih oblikovati baš kao što biste to učinili ,

, ili bilo koji drugi HTML element. CSS stil donosi mogućnost animacija i prijelaza.
Jednostavan primjer:

Pogledajte logotip Pen CodePen kao Inline SVG Chrisa Coyiera (@chriscoyier) na CodePenu.

A napisao je kako se pozabaviti malo složenijim dizajnom u ovom vodiču. Evo te demonstracije.

Pogledajte SVG oglas olovke Wufoo od Chrisa Coyiera (@chriscoyier) na CodePenu.

U ovom screencast-u izrađujemo još jednu animiranu SVG reklamu za Wufoo, počevši gotovo od nule. Dizajn sadrži neke oblake u kojima animiramo kretanje i ponavljamo glatko i beskrajno.

Isprva smo koristili ugrađeni SVG i animirali ga CSS-om koji je upravo pridružen istom HTML dokumentu. Ali onda, samo da pokažemo kako to radi, premjestili smo taj CSS u sam SVG, koji je potpuno valjan. Razlog zašto biste to možda željeli je taj što se tada animacija može pokrenuti čak i kada SVG koristite kao ili `background-image`.

Demo:

Pogledajte Pen kKdDj Chrisa Coyiera (@chriscoyier) na CodePenu.

Podrška preglednika za tu animaciju će se razlikovati. U vrijeme pisanja ovog teksta radio je samo u Chromeu.