Ko uporabljate vstavljeni SVG, je vsa ta koda SVG v HTML-ju in s tem v DOM-u. Lahko jih oblikujete tako, kot bi ,
ali kateri koli drug element HTML. CSS styling prinaša možnost animacij in prehodov.
Preprost primer:
Oglejte si logotip Pen CodePen kot Inline SVG Chrisa Coyierja (@chriscoyier) na CodePenu.
A je v tej vadnici napisal, kako se lotiti nekoliko bolj zapletene zasnove. Tukaj je ta predstavitev.
Oglejte si oglas Pen Wufoo SVG Chrisa Coyierja (@chriscoyier) na CodePen.
V tem predvajanju zaslona naredimo še en animirani SVG oglas za Wufoo, začenši skorajda iz nič. Zasnova vsebuje nekaj oblakov, ki jih animiramo, da se premikamo in ponavljamo gladko in neskončno.
Sprva smo uporabljali vstavljeni SVG in ga animirali s CSS, ki je bil pravkar pritrjen na isti dokument HTML. Potem pa smo samo, da predstavimo, kako deluje, ta CSS prestavili v sam SVG, ki je popolnoma veljaven. Razlog, da bi to morda želeli, je ta, da se potem animacija lahko zažene tudi, ko SVG uporabljate kot background-image.
Predstavitev:
Oglejte si Pen kKdDj Chrisa Coyierja (@chriscoyier) na CodePen.
Podpora brskalnika za to animacijo se bo razlikovala. V času pisanja je deloval samo v Chromu.
Datoteke
- 22-ad-1.svg